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

This article will explain in detail how to achieve css width adaptation. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

We often see such a page, the left side (or right side) is a fixed navigation or menu bar, the other side will change its size adaptively as the browser zooms, which is actually the implementation of width adaptation.

There are two most common implementation methods in css width adaptation, one is two-column layout, the other is three-column layout.

Let's give a brief introduction to these two methods.

1. Two column layouts with adaptive CSS width:

Let's take the fixed width on the right and the adaptive width on the left as an example:

1. The fixed width zone floats, and the adaptive zone sets margin without setting the width.

Fixed width area

Adaptive region

# sidebar {

Float:right;width:300px

} # content {

Margin-right:300px

}

Note:

The right side is always fixed, and the left side is adaptive according to the remaining size of the screen.

But in fact, this approach is limited, that is, the sidebar in the html structure must precede the content.

2. Float is used in conjunction with margin

Adaptive region

Fixed width area

# content {

Margin-left:-300px;float:left;width:100%

} # content.contentInner {

Margin-left:300px

} # sidebar {

Float:right;width:300px

}

Description: in this way, the actual width of the contentInner is the screen width-300px.

3. Absolute positioning is used in fixed width area, and margin is set in adaptive area.

My current structure is in the front.

Fixed width area

# wrap {

Position:relative

} # content {

Margin-right:300px

} # sidebar {

Position:absolute

Width:300px

Right:0

Top:0

}

4. Use display:table to implement

My current structure is in the front.

Fixed width area

# wrap {

Display:table

Width:100%

} # content {

Display:table-cell

} # sidebar {

Width:300px

Display:table-cell

}

Note: this method is not compatible with IE7 and the following browsers because the IE7 setting display to table is not recognized.

2. CSS width adaptive three-column layout:

1. Fixed-width three-column layout

Left

Middle

Right

* {

Padding:0

Margin:0

}

.div0 {

Width:800px

Height:500px;/* sets the height only to make the result more intuitive, and the height can be adapted according to the content * /

Margin:50pxauto

Border:2pxsolid#E51414;/* adds borders only to make the results more intuitive * /

}

.left {

Width:200px

Height:500px;/* sets the height only to make the result more intuitive, and the height can be adapted according to the content * /

Background:#6E6C8A

Float:left;/* is set to float left * /

Text-align:center

}

.middle {

Width:430px

Height:500px;/* sets the height only to make the result more intuitive, and the height can be adapted according to the content * /

Background:#806155

Float:left;/* is set to float left * /

Add 10px to the left and right of margin:010px010px;/* to make a gap between the three columns * /

Text-align:center

}

.right {

Width:150px

Height:500px;/* sets the height only to make the result more intuitive, and the height can be adapted according to the content * /

Background:#8F9068

Set float:right;/* to float on the right * /

Text-align:center

}

2. Three-column layout with left and right fixed width and middle adaptive width

Left

Middle

Right

* {

Padding:0

Margin:0;}

/ * .div0 {

Width:800px

Height:500px

Margin:50pxauto

Position:relative

Border:2pxsolid#E51414

}

You can leave the parent element div0 (that is, the default parent element is body). If so, you need to set the parent element to relative positioning * /

.left {

Width:200px

Height:500px

Background:#6E6C8A

Position:absolute

Top:0;l

Eft:0

/ * is set to absolute positioning and the top and left distances from its parent element are both zero /

Text-align:center

}

.middle {

Height:500px

Background:#806155

Margin:0160px0210px

/ * add 10px to the left and right to create a gap between the three columns * /

Text-align:center

}

.right {

Width:150px

Height:500px

Background:#8F9068

Position:absolute

Top:0

Right:0

/ * is set to absolute positioning and the top and right distances from its parent element are both zero /

Text-align:center

}

Note: when the width of the left and right div is fixed, and the width of the middle div is unknown, you cannot use floating to achieve a three-column layout. Use absolute positioning to achieve a three-column layout: you need to set the left and right elements to absolute positioning, and the middle element margin value to the width of the right element and the left element, respectively. A three-column layout can be implemented without a package of the parent element, and if there is a parent element, the parent element needs to be set to relative positioning.

This is the end of the article on "how to achieve css width adaptation". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.