CSS implementation of the classic three-column layout (fixed width on both sides, intermediate adaptive)

Recently began to conquer the various tasks of Baidu front-end Technical college, before doing a two more complex pages, deeply feel the foundation is not good, a lot of CSS statements are to achieve the effect and to write, there are many problems, and their solutions are not excellent, so decided to start from the foundation to learn, gradual.

The first task is to implement a three-column layout, the external two-column fixed-width, the middle-adaptive, the following are:

　　

I used two methods to achieve the above effects: float and position

The following is the CSS code for the float method:

1 . Team-inf{2 float: Left;3 width:200px;4}5 . Logo-group{6 float: Right;7 padding:0;8 width:120px;9 Height:420px;Ten} One . Team-intro{ A margin:0 140px 0 220px; -}

Note: The Margin-left and margin-right in the middle column are calculated based on the width of the left and right columns, and if you do not set these two parameters, the length of the middle column will be the same as the parent container and cannot achieve the effect of three columns.

The corresponding HTML code is as follows:

1 <Divclass= "Container Border-group">2         <Divclass= "Team-inf border-group">3             <imgsrc= "Images/teamlogo.jpg"class= "Team-logo"/>4             <Divclass= "Team-name">Yvonne Kong</Div>5         </Div>6         <Divclass= "Logo-group border-group">7             <imgsrc= "./images/logo1.jpg"class= "Personal-logo"/>8...... One         </Div> A         <Divclass= "Team-intro border-group"> -             ...... +         </Div> A     </Div>

Attention:

1. The middle column is the last Div, and the three columns in the HTML are important in the order in which they are written.
2. To make the parent container's length adaptive to the longest child element, simply set the parent container's Over-flow property to hidden.

The following is the CSS code for the position method:

1 . Container{2 position:relative;3 Min-height:460px;4 Background-color:#eee;5}6 . Team-inf{7 position:Absolute;8  Left:20px;9 width:200px;Ten} One . Logo-group{ A position:Absolute; -  Right:20px; - padding:0; the width:120px; - Height:420px; -} - . Team-intro{ + margin:0 140px 0 220px; -}

The parent container's position is set to relative, and the position of the two sidebar is set to absolute.

Attention:

1. To make the parent container's length adaptive to the longest child element, it cannot be implemented by setting the parent container's Over-flow property. Here, we set the min-height for the parent container, whose value is determined by the longer side of the column, and the length of the parent container will accommodate the length of the middle column when the middle column is above the column length.
2. Since the width of the columns is fixed, when the width of the browser is reduced, we set the min-width for the parent container in order to ensure that the middle column still occupies a certain width.
3. The Personal logo section of the right-hand column is an IMG element with four fixed-length lengths, with display:block,magin:20px for equal-spacing layouts. (whether there is a better way to layout the same spacing, to learn)
4. When the width of the DIV element is not set, its default width is the same as the parent container width, so when we set the width:100%, padding:20px for the body, we do not have to set the width for the sub-Div, if this is set at this time. Container width is 100%, There is no 20px padding on the right side of the page.
5. Each module needs to have the Padding property set, so Box-sizing is set to Border-box better.

The above is the feeling of doing this task, which may have a lot of problems, I will continue to learn, and constantly optimize this blog post.

Finally, post my demo code.

CSS implementation of the classic three-column layout (fixed width on both sides, intermediate adaptive)