如何将这些 div 彼此相邻放置以创建 3x2 布局

Question

如何将这些 div 彼此相邻放置在 3x2 行而不是 1 行中。

我应该将事件框和事件信息作为一个 div 而不是两个单独的 div 吗？我尝试将它们合并为一个 div 并给出了<p>event-info 类，但这没有成功。我还尝试了 div 和容器的不同大小，以便将它们推到彼此旁边，但这也不起作用。请参阅下面的我的代码。

 .event-box{

    height: 5rem;

    width: 30rem;

    float: left;

    clear: both;

    padding: 0;

    margin-top: 1rem;

    text-align: center;

    background: url(/assets/images/placeholderimg4.jpg);}

    .event-info{

    height: 5rem;

    width: 30rem;

    float: left;

    clear: both;

    padding: 0;

    margin: 0;

    text-align: center;

    background-color: rgba(77, 75, 75, 0.1);}

    .container{

    height: 100%;

    width: 64rem;

    word-wrap: break-word;

    overflow-y: hidden;

    padding: 0;}

<div class="container">

<div class="event-box">

<h3 class="event-text">Event 1</h3>

</div>

            <div class="event-info">

<p>1</p>

</div>

<div class="event-box">

<h3 class="event-text">Event 2</h3>

</div>

            <div class="event-info">

<p>2</p>

</div>

<div class="event-box">

<h3 class="event-text">Event 3</h3>

</div>

            <div class="event-info">

<p>3</p>

</div>

<div class="event-box">

<h3 class="event-text">Event 4</h3>

</div>

            <div class="event-info">

<p>4</p>

</div>

<div class="event-box">

<h3 class="event-text">Event 5</h3>

</div>

            <div class="event-info">

<p>5</p>

</div>

<div class="event-box">

<h3 class="event-text">Event 6</h3>

</div>

            <div class="event-info">

<p>6</p>

</div>

            

</div>

Answer 1

所以我为此使用了 CSS 网格。我确实将您的事件信息和事件框 div 组合在一起，使它们成为网格中的一个对象。.event-box {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 5rem;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 30rem;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clear: both;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-top: 1rem;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: url(/assets/images/placeholderimg4.jpg);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .event-info {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 5rem;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 30rem;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clear: both;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: rgba(77, 75, 75, 0.1);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .container {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 64rem;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; word-wrap: break-word;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: grid;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid-template-columns: auto auto auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid-template-rows: auto auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid-gap: 2rem;&nbsp; &nbsp; &nbsp; &nbsp; }<div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 1</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>1</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 2</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>2</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 3</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>3</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 4</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>4</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 5</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>5</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 6</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>6</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>因此，在容器类中，我添加了网格显示（以使用网格功能），然后添加了 grid-template-columns （允许您指定要包含的列数）和 grid-template-rows 来执行对于行来说也是同样的事情。然后我添加了一个网格间隙来稍微分隔 div 标签，但可以根据所需的间隙来使用该值。

Answer 2

您可以添加一个换行 div，例如“事件”：&nbsp; <div class="container">&nbsp; &nbsp; &nbsp; <div class='event'>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 1</h3>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>1</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class='event'>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 2</h3>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>2</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class='event'>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 3</h3>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>3</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class='event'>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 4</h3>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>4</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class='event'>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 5</h3>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>5</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class='event'>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 6</h3>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>6</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>还有一点 css 添加：.event{&nbsp; display:inline-block;&nbsp; width:49%;}尝试一下 -&nbsp;https://jsfiddle.net/5vz3Lhwc/

Answer 3

您可以利用 Flexbox 的强大功能！将每个内容包装row在带有 class row 的 div 中，并将每列包装在带有 class 的 div 中col。例子：<div class="container">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 1</h3>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; <p>1</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 2</h3>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; <p>2</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 3</h3>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; <p>3</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="row">&nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 4</h3>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; <p>4</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 5</h3>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; <p>5</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; <div class="event-box">&nbsp; &nbsp; &nbsp; &nbsp; <h3 class="event-text">Event 6</h3>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="event-info">&nbsp; &nbsp; &nbsp; &nbsp; <p>6</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>添加元素的 CSS：.row {&nbsp; width: 100%;&nbsp; display: flex;}.col {&nbsp; width: 33%;&nbsp; flex: 1;}编辑：CSS 网格可能是一个更简单的解决方案。