我怎样才能安排更多的div？答案

【问题标题】：How can I arrange more divs?我怎样才能安排更多的div？
【发布时间】：2021-04-14 19:30:35
【问题描述】：

如何排列多个 div？

您可以查看我试图安排它们：

我希望排列是对称的，但我不知道该怎么做。因为一个 div 可以有更多的文本，你会分别推荐我做什么？

我希望结果如下所示：

HTML 代码：

.label {
  width: 3.025in;
  padding: .125in .3in 0;
  margin-right: .125in;
  margin-bottom: .125in;
  float: left;
  text-align: center;
  overflow: hidden;
  outline: 1px dotted;
}

<div class="row">
    <div class="col-8">
        <h3>Books</h3>
        <div class="label">
            <a href="/Books/Details/1"><img src="img.jpg" height="100" width="100"></a>
            <br /> <strong>Title : Test</strong>
            <br /> Author : <strong>Name</strong>
            <br /> Category : <strong>Fantasy</strong>
            <br /> Description: <strong>Description..<a href="/Books/Details/1">Details</a></strong>
            <br /> Price : <strong>1552</strong>
            <br />
            <a class="btn btn-primary">Edit</a>
            <a class="btn btn-info">Details</a>
            <a class="btn btn-danger">Delete</a>
        </div>
    </div>
    <div class="col-4">
        <h3>Categories</h3>
        <table class="table table-condensed">
            <tbody>
                <tr>
                    <td>
                        <a href="/Categories/Details/1">Crime</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

【问题讨论】：

你在使用 Bootstrap 吗？如果是这样，请添加标签。你想要一个 Bootstrap 解决方案，还是只是 CSS？我不应该将两者混合用于一般布局目的。
“我希望结果看起来像这样：” - 所以你希望显示在一行中的项目具有相同的高度，无论一个是否有比另一个短的内容？然后结合 Bootstrap 研究“等高列”。

标签： javascript html css twitter-bootstrap

【解决方案1】：

在您的示例中，可能是 div 元素具有不同的高度。我会推荐

使用css省略号https://developer.mozilla.org/de/docs/Web/CSS/text-overflow
使用砖石网格https://masonry.desandro.com/

【讨论】：

【解决方案2】：

如何使用灵活框布局模块的 flex-wrap 属性。不适合父 flex 容器的项目被强制到另一行。

<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
  <div class="yellow">4</div>
</div>

/* Flexbox Styles */
.content {
    display: flex;
    flex-wrap: wrap;
}

即使父容器中有奇数个项目，这也会提供很好的对称排列

【讨论】：