Shulou(Shulou.com)06/03 Report--

This issue of the content of the editor will bring you about the CSS three-column layout of how to carry out the middle fixed width on both sides of the adaptive width, the article is rich in content and professional analysis and description for you, after reading this article, I hope you can get something.

This morning, in the Adang hero's high-quality front-end code group, I discussed and learned a three-column (three-column) layout with div+css, and fixed the adaptive width on the left and right sides in the middle, which sounds interesting. Because I have only encountered before, the left and right columns are fixed and adaptive in the middle. So I thought about it and hit the keyboard for a while, and then I tested it with you, and I still passed the test of each browser. In order to facilitate my future access, I also want my friends who don't know to learn this layout together. I specially sorted out the code and posted it to share and learn with you.

Before I talk about this layout, I would like to recall with you another of the three-column layout, that is, the left and right columns are fixed, with adaptive width in the middle. This kind of layout method, there will be a lot of asking G Dad and du Niang on the Internet, but I still have to repeat it to facilitate my future reference. I have a poor memory and have no way. If nothing else, let's get to the point. For the adaptive layout method with fixed two sides and one column in the middle, I first used the absolute positioning method. Look at the code first.

The code is as follows:

Left column

Right sidebar

Main content

For example, if my left and right columns are 220px, and the middle width is adaptive, then the method we implement using absolute positioning is like this.

The code is as follows:

Html,body {

Margin:0

Padding:0

Height: 100%

}

# left

# right {

Position: absolute

Top:0

Width: 220px

Height: 100%

}

# left {

Left:0

}

# right {

Right:0

}

# main {

Margin: 0 230px

Height: 100%

}

This method is the simplest and most troublesome, if the middle bar contains the minimum width limit, or contains the width of the internal elements, when the browser width is small to a certain extent, layers overlap will occur. I personally do not recommend this layout right now.

The second method uses floating layout.

This method is very similar to the absolute positioning method above, except that floating is used here instead of absolute positioning. Let's take a look at its html code first.

The code is as follows:

Left

Right

Mian

What I use in this method is the floating principle. When the width is fixed left and right, respectively, the main content column (the middle column is not defined) will be automatically inserted into the middle of the left and right columns. The most important thing is that the middle column must be placed behind the left and right columns, as shown in the html code above. Let's take a look at how the css style is implemented.

The code is as follows:

# left

# right {

Float: left

Width: 220px

Height: 200px

Background: blue

}

# right {

Float: right

}

# main {

Margin: 0 230px

Background: red

Height: 200px

}

Is it a simple method? you can test it on the local machine, and the results are as follows:

The third method: negative margin

Using this method is a little more complicated, using a negative margin value, and the html tag has also been added, so let's take a look at the code first.

The code is as follows:

Main content

Left content

Right

From the above Html code, we can clearly see that I have added a div inside the three div of main,left,right, so what kind of role do they play? you can clearly understand it from the next CSS.

The code is as follows:

# main {

Float: left

Width: 100%

}

# mainContainer {

Margin: 0 230px

Height: 200px

Background: green

}

# left {

Float: left

Margin-left:-100%

Width: 230px

}

# right {

Float: left

Margin-left:-230px

Width: 230px

}

# left .inner

# right .inner {

Background: orange

Margin: 0 10px

Height: 200px

}

Simply talk about its implementation principle, this method layout, mainly uses the negative margin value. First of all, I set a 100% width in div#main and float to the left, and the main content is placed in its inner div#mainContainer, and a margin-left and margin-right settings are needed in this main content layer, and these two values are very fastidious and can not be set casually, these two values need to be equal to the width of the left and right columns. We are here at 230px. Both the left and right columns are laid out with a negative margin value plus a left float, and the left column floats left with a "margin-left:-100%". This is because there is a div#main in front of the div#left and its width is 100%, so that the margin-left:-100% is set in the left column; just make the left column navigate to the leftmost side of the page. The right column also floats on the left, but its definition of "margin-left" is also negative and equals its own width of 230px; finally, a div.inner is added to the div#left,div#right to better control the spacing between the sidebar and the main content column. For example, the 10px in this case. You can see if the effect is the same as the second method.

After talking about the common layout methods, let's take a look at another three-column layout with a fixed width in the middle and adaptive widths on both sides. For me, this is a layout method that is rarely encountered. I don't know what you have experienced, so let's take a look at the implementation process of this layout method, and also look at the html code:

The code is as follows:

This is left sidebar content

This is main content

This is right siderbar content

This method is also implemented with the help of negative margin. First, we set a fixed value in the middle, because the value will not change, and then float it to the left. So the key landlord is to set it in the left and right sidebar, this method is to set it 50% width and add the negative left margin, the ideal value of this negative left margin is half the width of the middle column plus 1px, for example, in this case, it is "540px/2+1", that is to say, they all have a "margin-left:-271px", so that the contents of the left and right sidebars cannot be displayed properly. That's because they have a negative left margin operation. Now you just need to pull it back in the inner div.inner of the left and right sidebar, and then OK. You can take a look at the code in:

The code is as follows:

# left

# right {

Float: left

Margin: 0 000-271px

Width: 50%

}

# main {

Width: 540px

Float: left

Background: green

}

.inner {

Padding: 20px

}

# left .inner

# right .inner {

Margin: 0 0 0 271px

Background: orange

}

The specific effects are as follows:

In this way, if there is a messy bug under ie, you can modify the width values in div#right and div#left slightly:

The code is as follows:

# left

# right {

Float: left

Margin: 0 000-271px

Width: 50%

* width: 49.9%

}

In this way, it will be safe under ie.

There may be many ways to achieve this effect. I hope you all have better ways to share and learn together.

Updated on September 26, 2012-- CSS3 Flexbox

Three methods were introduced earlier to achieve the L1F2L3 layout effect, that is, the adaptive widths of the first and third columns, and the fixed width of the middle column. Today, we recommend a CSS3 method to implement this layout, using CSS3's Flexbox. The disadvantage of this method is that it can only be used in some browsers. For more information, please see the following code:

HTML structure

The code is as follows:

...

...

...

CSS code

The code is as follows:

.grid {

Display:-webkit-flex

Display:-moz-flex

Display:-o-flex

Display:-ms-flex

Display: flex

}

.col {

Padding: 30px

}

.fluid {

Flex: 1

}

.fixed {

Width: 400px

}

The effect is shown in the following demo:

The above is the editor for you to share the CSS three-column layout of how to carry out the middle fixed width on both sides of the adaptive width, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.