| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1788 人关注过本帖
标题:用CSS使三块内容水平并列
只看楼主 加入收藏
拉C
Rank: 1
来 自:南方
等 级:新手上路
帖 子:55
专家分:1
注 册:2008-7-29
结帖率:72.73%
收藏
已结贴  问题点数:20 回复次数:4 
用CSS使三块内容水平并列
我想把三块内容水平并列,第一块用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;
}
搜索更多相关主题的帖子: CSS 水平 
2010-04-20 23:12
afeilee
Rank: 3Rank: 3
等 级:论坛游侠
帖 子:14
专家分:117
注 册:2010-3-15
收藏
得分:14 
<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>
2010-04-23 22:18
小黑冰
Rank: 1
等 级:新手上路
帖 子:10
专家分:0
注 册:2009-12-19
收藏
得分:0 
程序代码:
<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 编辑 ]
2010-05-10 04:37
zcy649720927
Rank: 1
等 级:新手上路
帖 子:5
专家分:0
注 册:2010-4-11
收藏
得分:0 
第二块也要下float:left才能使第三块浮动
前一个DIV写float是使下一个DIV浮动
2010-05-11 21:17
唏嘘草
Rank: 2
等 级:论坛游民
帖 子:128
专家分:93
注 册:2011-6-4
收藏
得分:0 
看回复学习!
2011-08-22 14:45
快速回复:用CSS使三块内容水平并列
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.023599 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved