如何水平对齐并排的div？

Question

如何水平对齐并排的div？

htmlcsstwitter-bootstrap

3

我有3个div需要并排显示，并在父div的宽度内均匀分布（该宽度设置为窗口的100%）。最好的方法是什么？

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

PS：选项列表是动态的，即我可能有多于3个div，因此解决方案应该考虑到这一点。谢谢！

PS2：我正在使用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>

- Wagner Danda da Silva Filho

100% / 3 盒 = 33% CSS -> 选项添加 width: 33% 基础。 - KingRider

3个回答

1

只需使用 CSS3 的 flexbox。它的美妙之处在于只要父元素有足够的空间，您就可以添加额外的子元素，它们将自动相邻显示。请注意，一旦父元素用尽空间，附加的子元素将需要调整大小以便它们相邻显示。请参见以下来自 W3schools 的示例：

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

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

- coderrick

0

你可以使用Bootstrap 网格布局：

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

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

.row CSS 应该不需要，如果你包含了 Bootstrap CSS。

然而，$columnWidth 的计算只适用于最多 12 个项目（这是每行 Bootstrap 支持的最大列数），并且只有当项目数量是 12 的除数时（例如 1、2、3、4、6、12），才会产生全宽行。

- dhh

我的问题是，我可能有4、5或甚至6列，它们必须显示在同一行上（即不能换行）。这意味着我必须知道数量，然后将-4（适用于3个元素）调整为其他内容（例如，对于4个元素为-3等）。 - Wagner Danda da Silva Filho

你可以使用 PHP 来计算列的大小。我会添加一个示例。 - dhh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam Buchanan Smith · Accepted Answer

您可以使用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;
}