我正在尝试创建一个带有 3 个 div 的标题:一个左对齐,一个右对齐,另一个居中。
例如,页面为 1200 像素,黑色、红色和黄色矩形为 960 像素并在页面中居中。黑色矩形中的元素被添加到左侧,yywo 矩形中的元素被添加到右侧,红色 tectangle 中的元素居中。
这是网站标题的一个很好的一般案例研究
我正在尝试创建一个带有 3 个 div 的标题:一个左对齐,一个右对齐,另一个居中。
例如,页面为 1200 像素,黑色、红色和黄色矩形为 960 像素并在页面中居中。黑色矩形中的元素被添加到左侧,yywo 矩形中的元素被添加到右侧,红色 tectangle 中的元素居中。
这是网站标题的一个很好的一般案例研究
这将解决您的问题
<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;
}
希望这会有所帮助……菲利普·杜斯
试试这个..
<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>