Home > Developer > Web Develop

DIV+CSS layout

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Float:

The Float property is the most basic and most commonly used property in the DIV+CSS layout for implementing multi-column functionality, and we know that the <div> tag can only display one line in the default row, whereas using the Float property allows you to display multiple div functions in a row. The most straightforward way to explain this is to implement the multi-column function of table layout.

Margin:

The margin property is used to set the distance between two elements.

Padding:

The Padding property is used to set the distance between the border of an element and its contents.

Clear:

Using the Float property to set a row with multiple div (multiple columns), it is best to use the clear property to clearly float before the next line starts, otherwise the above layout will affect the following.

Examples: Use examples below if you make a simple and basic layout, the effect is as follows:

Code:

?
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 6667 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>DIV+CSS布局教程</title><style type="text/css">#Container{    width:1000px;    margin:0auto;/*设置整个容器在浏览器中水平居中*/    background:#CF3;}#Header{    height:80px;    background:#093;}#logo{    padding-left:50px;    padding-top:20px;    padding-bottom:50px;}#Content{    height:600px;    /*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/    margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的距离*/    background:#0FF;    }#Content-Left{    height:400px;    width:200px;    margin:20px;/*设置元素跟其他元素的距离为20像素*/    float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/    background:#90C;}#Content-Main{    height:400px;    width:720px;    margin:20px;/*设置元素跟其他元素的距离为20像素*/    float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/    background:#90C;}/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/#Footer{    height:40px;    background:#90C;    margin-top:20px;}.Clear{    clear:both;}</style><body><div id="Container">    <div id="Header">        <div id="logo">这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。</div>    </div>    <div id="Content">        <div id="Content-Left">Content-Left</div>        <div id="Content-Main">Content-Main</div>    </div>    <div class="Clear"><!--如何你上面用到float,下面布局开始前最好清除一下。--></div>    <div id="Footer">Footer</div></div></body>

Note: As a container for the entire page, container controls the location of the entire page in the browser, where margin:0 auto is used, the control container container is horizontally centered in the browser, and the general fixed-width layout uses this code.

DIV+CSS layout

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
designing with css grid layout pdf css div table generator css div margin beautiful div box css css center div horizontally how to make div centered in css layout ini

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More