css - css 标题布局宽度 3 div

Question

我正在尝试创建一个带有 3 个 div 的标题：一个左对齐，一个右对齐，另一个居中。

例如，页面为 1200 像素，黑色、红色和黄色矩形为 960 像素并在页面中居中。黑色矩形中的元素被添加到左侧，yywo 矩形中的元素被添加到右侧，红色 tectangle 中的元素居中。

这是网站标题的一个很好的一般案例研究

Answer 1

这将解决您的问题

<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>

Answer 2

不久前我写了一篇关于此的文章，这是我的代码...

<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;

}

希望这会有所帮助……菲利普·杜斯

Answer 3

试试这个..

<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>