Question

我想创建三个div框（黑色，红色和蓝色），它们水平均匀分布。在我的尝试中，我将每个div设置为inline-block，然后将三个divs设置为left，center和right对齐。但是，渲染时，三个框都对齐左侧。我真正想要的是第一个盒子在外部div的左边，第三个盒子在外部div的右边，然后中间盒子恰好在第一个和第三个的中间框。

这是我的代码：

<div style="width:1000px">

    <div style="display:inline-block; text-align:left; width:200px; height:100px; background-color:black"></div>
    
    <div style="display:inline-block; text-align:center; width:200px; height:100px; background-color:red"></div>
    
    <div style="display:inline-block; text-align:right; width:200px; height:100px; background-color:blue"></div>

    </div>

Answer 1

可能有十几种不同的方法可以做到这一点。这是一个：

＆＃13;

<div style="width:1000px; text-align:center">
  <div style="display:inline-block; float:left; width:200px; height:100px; background-color:black"></div>
  <div style="display:inline-block; width:200px; height:100px; background-color:red"></div>
  <div style="display:inline-block;  float:right;width:200px; height:100px; background-color:blue"></div>
</div>

＆＃13;

浮动第一个和最后一个div并将父文本对齐设置为居中以处理中间div。

好的，这是另一个（使用flexbox）：

＆＃13;

<div style="width:1000px; display:flex; justify-content: space-between;">
  <div style="width:200px; height:100px; background-color:black"></div>
  <div style="width:200px; height:100px; background-color:red"></div>
  <div style="width:200px; height:100px; background-color:blue"></div>
</div>

＆＃13;

Answer 2

你可以在100％宽度的容器内向左浮动每个div，然后在每个容器上移动33％的宽度。

＆＃13;

#cointainer {
    width: 100%;
    color: white;
    display: flex;
    justify-content: space-between;
}
#left {
    width: 33%;
    float: left;
    background-color: black;
}
#center {
    width: 33%;
    float: left;
    background-color: red;
}
#right {
    width: 33%;
    float: left;
    background-color: blue;
}

＆＃13;

<div id="cointainer">
    <div id="left">blah blah blah</div>
    <div id="center">blah blah blah</div>
    <div id="right">blah blah blah</div>
</div>

＆＃13;

Answer 3

您可以使用flexbox：

<div style="width:1000px; display: flex; justify-content: space-between">
    <div style="width:200px; height:100px; background-color:black"></div>  
    <div style="width:200px; height:100px; background-color:red"></div>    
    <div style="width:200px; height:100px; background-color:blue">

Complete tutorial here

三个div的等水平对齐

3 个答案: