HTML+CSS div solution when relative width and absolute width conflict

HTML+CSS div solution when relative width and absolute width conflict

Div solution when relative width and absolute width conflict

Summary: Generally, we use px when using absolute width and % when using relative width, but what should we do if we use both absolute and relative widths at the same time?

Let's use an example to explain today's content:

1. Complete the questions on the picture
2. Try to provide a solution that makes the width equal to the screen width, and the layout is roughly similar to 1. Make sure that no matter how you adjust the width of the browser, the relative width of the middle layout does not change, and the spacing between grids is 10px.

Question 1 is very simple, and there are many solutions, so I won’t go into details.

Analyzing question 2, we found that there are two key requirements:
Relative width: the relative width (ratio) of the grid remains unchanged Absolute width: the absolute distance between grids remains unchanged

If you only care about relative width, then it is very simple, just set the width of the left grid to 30% (for example), and the width of each grid on the right to 70%; if you only care about absolute width, then it is even simpler, just set the distance in the middle to 10px. But what if you want to satisfy both at the same time? Do I have to write width: (inherit-10px)*30%?
Obviously not. Let me talk about my solution (I am a newbie, if there are any omissions, or if you have a better solution, please correct me in the comment section!)

First write out the general box framework

<!-- Tiger's Code World-->
<!doctype html>
<html>
<head>
    <title>Discussion on relative width and absolute width</title>
    <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 will not go into details about the top and bottom containers. I'll just talk about the middle part.

First of all, it is clear that the problems of relative width and absolute width cannot be solved at the same time (1. As far as this question is concerned 2. Corrections are welcome)
Then we split the problem: solve the relative width first, then the absolute width, or solve the absolute width first, then the relative width. As far as this question is concerned, the former is simpler. How do we "split" the problem? ——Of course it’s the container div!

Let's solve the relative width first:
We merge A and C, and then describe them with B using relative width.

This is very simple, the width on the left is 30% and the width on the right is 70%
So how do we solve the layout in the left container?
Let's think about this first: Can we make a container with a grid of fixed width on the left and a grid of variable width on the right? Of course, this is the navigation bar! This is very simple, I just found a way to paste it below:

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

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

Wouldn't this solve the problem immediately?
So next time when you encounter a conflict between relative and absolute, be sure to use div as a powerful tool!

Of course, we also need to pay attention to some small details, such as how to deal with border issues, etc. This requires adjusting 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, another div needs to be placed inside the right.

The box model is the basic skill of CSS layout. Everyone must have a deep understanding of it before applying it to various transformations. To complete this question, you need to have a good understanding of the relationship between margin, padding (although it is not used in this question), border, and div. I will not talk about it in detail today and will talk about it next time when I have time.

I've pasted all my code below for your reference. If you have a better solution, please share it in the comment section!

HTML:

<!Tiger's Code World>
<!doctype html>
<html>
<head>
    <title>CSS layout exercise</title>
    <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 unclear whether it is the width with borders and margins or the width without borders and margins. The following defaults to the width without borders and margins*/


*{
    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 concludes this article on how to solve the div problem when relative width and absolute width conflict in HTML+CSS. For more information on relative width and absolute width conflict in HTML+CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future!

<<:  How to force vertical screen on mobile pages

>>:  How to use React to implement image recognition app

Recommend

Some conclusions on the design of portal website focus pictures

Focus images are a way of presenting content that ...

MySQL 5.7.12 installation and configuration tutorial under Mac OS 10.11

How to install and configure MySQL on Mac OS 10.1...

Vue + OpenLayers Quick Start Tutorial

Openlayers is a modular, high-performance and fea...

HTML page jump code

Save the following code as the default homepage fi...

How to modify the default storage location of Docker images (solution)

Due to the initial partitioning of the system, th...

Install JDK1.8 in Linux environment

Table of contents 1. Installation Environment 2. ...

HTML table tag tutorial (45): table body tag

The <tbody> tag is used to define the style...

How to create a trigger in MySQL

This article example shares the specific code for...

Div can input content without using input as an input box to block the automatic input style

Today I designed a dynamic window style for publis...

js to upload pictures to the server

This article example shares the specific code of ...

Mysql dynamically updates the database script example explanation

The specific upgrade script is as follows: Dynami...

JavaScript modularity explained

Table of contents Preface: 1. Concept 2. The bene...

Solution to forgetting mysql database password

You may have set a MySQL password just now, but f...

React+Koa example of implementing file upload

Table of contents background Server Dependencies ...

Detailed explanation of the steps for configuring the Centos7 bridge network under VMware

The complete steps of Centos7 bridge network conf...