我试图用3个div创建页眉:一个左对齐,一个右对齐,另一个居中。 css页眉布局宽度3 divs
该页面是例如1200px 黑色,红色和黄色的矩形是960px并居中在页面中。 将黑色矩形中的元素添加到左侧, 将yellwo矩形中的元素添加到右侧, 并将红色矩形中的元素居中。
这是一个网站
我试图用3个div创建页眉:一个左对齐,一个右对齐,另一个居中。 css页眉布局宽度3 divs
该页面是例如1200px 黑色,红色和黄色的矩形是960px并居中在页面中。 将黑色矩形中的元素添加到左侧, 将yellwo矩形中的元素添加到右侧, 并将红色矩形中的元素居中。
这是一个网站
这将解决您的问题
<div class="header" style="width:1200px;">
<div style="width:40%;float:left;" class='black-one'>
<div style='float:left;'>Some content</div>
<div style="clear:both"></div>
</div>
<div style="width:20%;float:left;" class='red-one'>
<div style="margin:10px auto;text-align:center">Some content</div>
<div style="clear:both"></div>
</div>
<div style="width:40%;float:left;" class='yellow-one'>
<div style='float:right;text-align:right;'>Some content</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
我写了一篇文章在此回到这里,一会儿是我的代码的头很好的通用性案例研究...
<div id="mainContent">
<div id="col1">
Column 1
</div>
<div id="col2">
Column 2
</div>
<div id="col3">
Column 3
</div>
<div id="clearance" style="clear:both;"></div>
</div>
这里是它的CSS ....
#mainContent {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#col1 {
margin: 10px;
float: left;
width: 300px;
}
#col2 {
margin: 10px;
float: left;
width: 300px;
}
#col3 {
margin: 10px;
float: left;
width: 300px;
}
希望这有助于...菲利普·杜斯
你得到了列,但内容也必须为每一列相应的调整。 – kjetilh 2013-02-17 11:20:19
试试这个..
<style>
.header { margin: 0px auto; width: 1200px; }
.floatt { float: left; margin-right: 5px;}
.black-one { width: 40%;}
.red-one { width: 20%;}
.yellow-one { width: 40%;}
.clear { clear: both;}
</style>
<div class="header">
<div class='black-one floatt'>
Some content
</div>
<div class='red-one floatt'>
Some content
</div>
<div class='yellow-one floatt'>
Some content
</div>
<div class="clear"></div>
</div>
你得到了列,但内容也必须相应地调整每列。 – kjetilh 2013-02-17 11:20:59
这是一个很好的概述,谢谢! – Vjeetje 2013-02-17 21:02:25
谢谢,但我建议不要使用内联css,而是使用外部css文件进行样式设置。如果它能帮助你,你能投票吗? – 2013-02-19 05:52:10