CSS implements two-column layout and css implements Layout

Source: Internet
Author: User

CSS implements two-column layout and css implements Layout
Preface

A two-column layout is a page layout that consists of the main bar and the sidebar. It is a layout of many web pages. CSS is generally used to implement the two-column layout.

There are multiple ways to implement the two-column layout. Here we use four common implementation methods. It mainly includes liquid layouts, Jello layouts, absolute layouts, and table layouts ).

All source codes are at the bottom.

Fluid layout

The browser displays HTML elements, starting from the top of the HTML file and displaying each element from the top down along the element stream, just like a fluid.

The page layout is as follows:

<Header> header ................. 

The effect is as follows:

To achieve the layout of the two columns, the left column of the page needs to float.

Div # section {float: left; // float the left bar of the page}

If the light float the left column, the display will be normal when the browsing width is sufficient. If the width is insufficient, the footer will be blocked.

At this time, we need to clear the float so that the footer will not be blocked.

Footer {clear: left; // clear float. The clear values include left/right/both, which are the float values on both sides}

Freeze Layout

Fluid layout when users lengthen or narrow down the browser, the page content will be wrapped. In many cases, this is not what we want to see. At this time, we need to freeze the page and use the freeze layout.

Freeze layout is to add a div and specify the width on the outermost layer of the Fluid layout.

<Div id = "allcontent"> // implement freeze layout 
Div # allcontent {width: pixel PX; // specify the width as pixel PX}
Gel Layout

When we use the freeze layout, the page will be docked on the left. to center the page, we need to use the gel layout.

The gel layout is to set the left and right margins of the div on the outermost layer of the page to auto. The page is centered regardless of the browser size.

    div#allcontent    {        width: 1200px;        margin-left: auto;        margin-right: auto;    }
Absolute Layout

Absolute layout is to use position: absolute to layout elements.

Position has four attributes. The default value is static, which means it will not be located. Absolute uses the nearest parent element for locating. Fixed uses a window to locate, that is, using a browser to locate. Relative uses the element itself to locate in the normal position.

You can use absolute positioning to specify certain pixels for the two-column layout to achieve absolute layout,

Div # aside {position: absolute; // absolute layout top: 170px; // It is 170px right: 0px from the top border of the parent element; // 0px width: 300px from the right border of the parent element; // specify the width}

Because the absolute positioning is to delete elements from the stream, changing the browser size will also cause the border to block the footer.

Table Layout

Table layout is to layout pages in the form of tables. Use display: table for implementation.

There are also <table> labels in HTML. Some people use <table> labels for table layout, but this is unreasonable. HTML is a hypertext markup language. Each tag has its own semantics to ensure a clear structure. Therefore, HTML should not be used for table layout, but CSS should be used for layout.

<Header> header ................. 

Table layout needs to use display: table in the outermost div

Div # tableContainer {display: table; // The outermost div is set to the table border-spacing: 10px; // The table layout has no margins, border-spacing is equivalent to margin} div # tableRow {display: table-row; // You can also set multiple rows.} div # section {display: table-cell; // set div to the cell background-color: rgb (93,173,226);} div # aside {display: table-cell; // set div to the cell background-color: rgb (133,146,158 );}
Conclusion

There are many ways to implement the layout. Which one can be used depends on the business needs? However, the two-column layout is suitable for table layout, generally, one layout is not used separately. Multiple la s are used at the same time to achieve the best effect.

Complete source code link: https://github.com/yijidao/layouts

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.