Heim  >  Artikel  >  Web-Frontend  >  学习DIV+CSS一个最简单的布局一行三列DIV代码!_html/css_WEB-ITnose

学习DIV+CSS一个最简单的布局一行三列DIV代码!_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:28:281558Durchsuche

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

 

 

现在总结一下:

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

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

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn