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

WBOY
Release: 2016-06-24 12:28:28
Original
1555 people have browsed it

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代码如下:

 

 

现在总结一下:

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

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

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

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template