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

This article mainly explains "how to achieve a single DIV adaptive width layout CSS", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to achieve the lonely DIV adaptive width layout CSS" bar!

Key point: adaptive, at this time can not use a fixed CSS width value, this time can only use a percentage of the width to express width.

Key code: the percentage value of width:?% in percentages, and the natural object automatically calculates the width of the object based on the set percentage.

Example CSS code:

The code is as follows:

.box {width:60%; height:80px; border:1px solid # F00; margin:0 auto}

Note: the width is set to 60% here, in order to observe the effect, so set the height and red border, because considering that an independent DIV box is generally centered, set margin:0 auto

Complete HTML source code (including HTML and CSS):

The code is as follows:

Independent of a width adaptive instance

.box {width:60%; height:80px; border:1px solid # F00; margin:0 auto}

Content

Screenshot of the effect of the example:

The above is a complete example of a separate row of adaptive width.

DIVCSS5 expands thinking:

1, in the general web layout, the general main content is a fixed width, so the specific settings of the width are determined according to the art map, but sometimes do not rule out the possibility that the width is adaptive at this time can not be set fixed width style.

2. In the local DIV CSS layout, because the specific width is set for the outermost layer, and the children of a single row sometimes do not need to set the width style, so the default DIV width is 100%, if an object sets the width fixed. While the subset sets either paddding-left or padding-right (or both) without setting the width, the browser explains that rendering the subset DIV width will still intelligently subtract the padding occupancy width from the total width. In general, when the layout is partial, a single-row DIV does not have to set a specific width or percentage width as long as it does not use floats, because the browser will intelligently handle the width according to the parent of this layer.

Thank you for your reading, the above is the content of "how to achieve a single DIV adaptive width layout CSS". After the study of this article, I believe you have a deeper understanding of how to achieve a single DIV adaptive width layout CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.