Home > Article > Web Front-end > Learn DIV CSS, the simplest layout with one row and three columns of DIV code!_html/css_WEB-ITnose

Learn DIV CSS, the simplest layout with one row and three columns of DIV code!_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 12:28:281556browse

CSS代码如下：

body{
text-align:center;
margin:0px;
padding:0px;

}
#father
{
position:relative;
width:750px;
text-align:center;
}
   #banner{height:96px;background-color:#999;text-align:left; padding:0px;margin:0px;}
   #b-left{width:159px;margin:0px;padding:0px;float:left;}
   #b-center{margin:0px;float:left;}
   #b-right{
   text-align:left;
   marign:0px;
   padding:0px;
   width:108px;
   background-color:#00ffff;
      height:96px;
   float:right;
}
HTML代码如下：

现在总结一下：

一行三列的布局有以下几种思想：

第一都做成绝对的布局，设定每一个块和周围的距离

第二就是利用嵌套的方法，把任意两个先当成一个，然后再把他们和第三个一起设！不过我这里好像直接把三个块都是分开设的，好像也没有问题！呵呵！

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS Box Mode (Quick Start with DIV Layout)Next article：CSS Box Mode (Quick Start with DIV Layout)

See more

Learn DIV CSS, the simplest layout with one row and three columns of DIV code!_html/css_WEB-ITnose

Related articles