注册 登录
编程论坛 → WEB前端(UI)

用CSS使三块内容水平并列

拉C 发布于 2010-04-20 23:12， 1788 次点击
我想把三块内容水平并列，第一块用float：left;第二块用margin: auto;第三块我想用float: right;但是第三块就会掉到下一行去了，我这样做是不是错的？谁可以不可以告诉我一般怎么用CSS设计水平并列的？
代码：
.show-a {
float: left;
width: 310px;
height: 250px;
background: #FFF;
}

.show-b {
margin: auto;
width: 310px;
height: 250px;
background: #FFF;
}

.show-c {
margin-right: 0px;
width: 310px;
height: 250px;
background: #FFF;
}
4 回复
#2
afeilee2010-04-23 22:18
<style>
   
    #head{
    width:30%;
    height:50px;
    background:#00CC99;
    float:left;
    clear:both}
    #body{
    width:40%;
    height:50px;
    float:left;
    background:#000000
   
    }
    #foot{
    width:30%;
    height:50px;
    float:right;
    background:red
    }
</style>
 <BODY>
 
  <div id="head"></div>
  <div id="body"></div>
  <div id="foot"></div>

 </BODY>
#3
小黑冰2010-05-10 04:37
程序代码：
<style>
#zuo {
float: left;
width: 310px;
height: 250px;
background: #FF0000
}

#zhong {
float:left;
width: 310px;
height: 250px;
background: #0000ff
}

#you {
float:left;
width: 310px;
height: 250px;
background: #00FFFF
}

<BODY>

  <div id="tou"></div>
  <div id="zhong"></div>
  <div id="you"></div>

</BODY>



[ 本帖最后由 小黑冰 于 2010-5-10 04:52 编辑 ]
#4
zcy6497209272010-05-11 21:17
第二块也要下float:left才能使第三块浮动
前一个DIV写float是使下一个DIV浮动
#5
唏嘘草2011-08-22 14:45
看回复学习！
1
©2025, BCCN.NET
电脑版