Question

我有3个div需要并排显示并均匀分布在父div宽度（设置为窗口的100％）内。这是最好的方式吗？

参见下面的示例，它只是浮动3个div（它们只是将它们一个接一个地放在左边，而不是我需要的。）

PS：选项列表是动态的，即我可能有超过3个div，因此理想情况下解决方案应考虑到这一点。谢谢！：）

PS 2：我正在使用bootstrap，所以如果有一个很好的方法可以使用bootstrap这样做我就是为了它。

.row {
  width: 100%;
  background-color: #DDD;
}

.option {
  border: 1px solid #BBB;
  float: left;
  padding: 10px;
}

<div class="row">

    <div class="option">
        Box A
    </div>
    <div class="option">
        Box B
    </div>
    <div class="option">
        Box C
    </div>

</div>

Answer 1

您可以使用flex，请参阅小提琴https://jsfiddle.net/Lddyn573/5/

.row {
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: #DDD;
}

.option {
  border: 1px solid #BBB;
  padding: 10px;
}

Answer 2

只需使用CSS3的flexbox赞美。它的美妙之处在于，只要父元素中有足够的空间，您就可以添加其他子元素，它们将自动显示在彼此旁边。请注意，一旦父节点空间不足，其他子元素将需要自己调整大小，以便它们彼此相邻显示。请参阅W3schools的以下示例：

＆＃13;

 .flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

＆＃13;

    <body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

</body>

＆＃13;

Answer 3

您可以使用Bootstrap Grid layout：

＆＃13;

.option {
  border: 1px solid #BBB;
}

＆＃13;

<?php
// whatever $items contains...
$items = [];

$columnWidth = floor(12 / count($items)) ?: 1;
?>

<div class="row">

    <div class="option col-md-<?php echo $columnWidth;?>">
        Box A
    </div>
    <div class="option col-md-<?php echo $columnWidth;?>">
        Box B
    </div>
    <div class="option col-md-<?php echo $columnWidth;?>">
        Box C
    </div>

</div>

＆＃13;

如果包含bootstrap css，则不需要.row CSS。

但是，$columnWidth计算仅适用于最多12个项目（即每行的最大列数，每个bootstrap支持），并且只有当项目数为除数为12（例如1,2,3,4,6,12）。

如何水平对齐并排div？

3 个答案: