Div solution to conflict between relative width and absolute width of HTML + CSS

Time:2020-9-12

Solution to div when relative width and absolute width conflict

Abstract: generally, we will use PX when using absolute width, and% when using relative width. But what should we do if we use both absolute width and relative width?

We use an example to explain today’s content

1. Complete the title requirements on the picture
2. Try to provide such a scheme that the width of the screen is the same as that of the screen, and the layout is similar to that of 1. No matter how you adjust the width of the browser, you can guarantee thatThe relative width of the middle part does not change, and the spacing between grids is 10px

Topic 1 is very simple, there are many solutions, I will not go over them

The analysis of Topic 2 shows that there are two key requirements:
Relative width: the relative width (scale) of the lattice remains unchanged
Absolute width: the absolute distance between grids remains unchanged

If you only focus on the relative width, it is very simple to make the width of the left grid 30% (for example), and the width of the right grid is 70%; if you only focus on the absolute width, it is easier to make the distance between the two grids be 10px. But what to do when you want to be satisfied at the same time? Is it difficult to write width: (inherit-10px) * 30%?
Obviously not. Let me talk about my solution (I Xiaobai, if there is any negligence, or you have a better solution, please correct it in the comments area!)

First write the general frame of the box

<! -- Tiger's code world -- >
<!doctype html>
<html>
<head>
    < title > discussion on relative width and absolute width
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="top">
    </div>
    <div class="wrapper">
        <div id="left">
        </div>
        <div id="right">
        </div>
    </div>
    <div id="bottom">
    </div>
</body>
</html>

I won’t go into the top and bottom containers. I’ll just talk about the middle part.

 

First of all, the problem of relative width and absolute width cannot be solved at the same time
Let’s split the problem: first solve the relative width, then solve the absolute width, or first solve the absolute width, and then solve the relative width. As far as this topic is concerned, the former is simpler. And how can we “split” the problem? ——Container div, of course!

Let’s first address the relative width:
Let’s merge a and C, and then describe them with relative widths

It’s very simple, 30% on the left and 70% on the right
How to solve the layout in the left container?
Let’s first think: can we make a container with a fixed width grid on the left and a variable width grid on the right? Of course, this is the navigation bar! This is very simple. I found a way to stick it on the bottom


#left{
    height: 300px;
    float: left;
    width: 150px;
}

#right{
    height: 300px;
    width: auto;
    margin-left: 150px;
}

Is the problem solved immediately?
So the next time you encounter a relative and absolute conflict, be sure to use a good div!

Of course, we also need to pay attention to some small details, such as how to deal with the border problem. We need to adjust the height of the outer container and the inner container (the difference is 2 * border width), and in order to make the right container adapt to the left, we need to set a div inside the right.

Box model is the basic skill of CSS layout, we must have a deep understanding of it before it can be applied to various deformation. To complete this problem, we still need to have a good understanding of the relationship between margin, padding (although this question is not used), border and Div. I will not talk about it any more today. I will talk about it next time.

Below all my code paste, a reference for you, if there is a better scheme, must be in the message area to share Oh!

HTML:

< tiger's code world >
<!doctype html>
<html>
<head>
    < title > CSS layout exercise
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="top">
    </div>
    <div class="wrapper">
        <div id="left">
            <div class="innerright"></div>
            <div class="inner"></div>
        </div>
        <div id="right">
            <div class="inner"></div>
        </div>
    </div>
    <div id="bottom">
    </div>
</body>
</html>

CSS:

/*Tiger's code world*/

/*The width in the title is not clear whether it is the width with or without border and margin
  The width without border and margin is set by default*/


*{
    margin: 0px;
    padding: 0px;
    border-width: 3px;
    border-style: solid;
    border-color: black;
}

html{
    margin: 0;
    padding: 0;
    border-width: 0;
    width: 100%;
}

body{
    margin: 0;
    padding: 0;
    border-width: 0;
}

#top{
    margin: 10px;
    height: 150px;
}

.wrapper{
    margin: 10px;
    height: 300px;
    width: inherit;
    border-width: 0;
}

#left{
    height: 300px;
    width: 30%;
    float: left;
    border-width: 0;
}

#left .inner{
    height: 294px;
    width: auto;
    margin-right: 10px;

}

#left .innerright{

    height: 294px;
    width: 10px;
    float: right;
    border-width: 0;
    margin-left: 10px;
}


#right{
    height: 300px;
    width: 70%;
    float: right;
    border-width: 0;

}

#right .inner{
    height: 294px;
    width: auto;
}


#bottom{
    margin: 10px;
    height: 150px;
}

This article on the HTML + CSS relative width and absolute width of the conflict when the div solution to this, more related HTML + CSS relative width and absolute width conflict content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you can support developeppaer more in the future!