CSS webpage layout tutorial 2: Adaptive width of one column

Adaptive Layout is a common layout in web design. Adaptive Layout can automatically change the width and height of a browser window based on the size of the browser window, A good Adaptive Layout of the website can provide the best display effects for different resolutions of the display. In fact, div occupies the space of the whole row by default, which is the representation of the Adaptive Layout with a width of 100%. The work we need to do in an adaptive layout is also very simple, you only need to change the width from a fixed value to a percentage value. CopyCodeThe Code is as follows: # layout {
Border: 2px solid # a9c9e2;
Background-color: # e8f5fe;
Height: 200px;
Width: 80%;
}

In most CSS style attributes that use numeric values as parameters, the percentage is provided, and the width attribute is no exception. Here we change the width from a fixed-width 80% PX column, the preview result below shows that the DIV width has changed to 80% of the browser width. The advantage of self-adaptation is that when the browser window size is expanded or reduced, the width of the browser will be proportional to the current width of the browser.Xmlns = "http://www.w3.org/1999/xhtml">

Adaptive width of one column (aa25.cn)