如何将这些 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 {

            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;

            padding: 0;

            display: grid;

            grid-template-columns: auto auto auto;

            grid-template-rows: auto auto;

            grid-gap: 2rem;

        }

<div class="container">

        <div class="event-box">

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

            <div class="event-info">

                <p>1</p>

            </div>

        </div>

        <div class="event-box">

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

            <div class="event-info">

                <p>2</p>

            </div>

        </div>

        <div class="event-box">

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

            <div class="event-info">

                <p>3</p>

            </div>

        </div>

        <div class="event-box">

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

            <div class="event-info">

                <p>4</p>

            </div>

        </div>

        <div class="event-box">

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

            <div class="event-info">

                <p>5</p>

            </div>

        </div>

        <div class="event-box">

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

            <div class="event-info">

                <p>6</p>

            </div>

        </div>

    </div>

因此，在容器类中，我添加了网格显示（以使用网格功能），然后添加了 grid-template-columns （允许您指定要包含的列数）和 grid-template-rows 来执行对于行来说也是同样的事情。然后我添加了一个网格间隙来稍微分隔 div 标签，但可以根据所需的间隙来使用该值。

Answer 2

您可以添加一个换行 div，例如“事件”：

  <div class="container">

      <div class='event'>

        <div class="event-box">

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

        </div>

        <div class="event-info">

            <p>1</p>

        </div>

      </div>

      <div class='event'>

        <div class="event-box">

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

        </div>

        <div class="event-info">

            <p>2</p>

        </div>

      </div>

      <div class='event'>

        <div class="event-box">

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

        </div>

        <div class="event-info">

            <p>3</p>

        </div>

      </div>

      <div class='event'>

        <div class="event-box">

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

        </div>

        <div class="event-info">

            <p>4</p>

        </div>

      </div>

      <div class='event'>

        <div class="event-box">

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

        </div>

        <div class="event-info">

            <p>5</p>

        </div>

      </div>

      <div class='event'>

        <div class="event-box">

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

        </div>

        <div class="event-info">

            <p>6</p>

        </div>

      </div>

    </div>

还有一点 css 添加：

.event{

  display:inline-block;

  width:49%;

}

尝试一下 - https://jsfiddle.net/5vz3Lhwc/

Answer 3

您可以利用 Flexbox 的强大功能！将每个内容包装row在带有 class row 的 div 中，并将每列包装在带有 class 的 div 中col。例子：

<div class="container">

  <div class="row">

    <div class="col">

      <div class="event-box">

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

      </div>

      <div class="event-info">

        <p>1</p>

      </div>

    </div>

    <div class="col">

      <div class="event-box">

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

      </div>

      <div class="event-info">

        <p>2</p>

      </div>

    </div>

    <div class="col">

      <div class="event-box">

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

      </div>

      <div class="event-info">

        <p>3</p>

      </div>

    </div>

  </div>

  <div class="row">

    <div class="col">

      <div class="event-box">

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

      </div>

      <div class="event-info">

        <p>4</p>

      </div>

    </div>

    <div class="col">

      <div class="event-box">

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

      </div>

      <div class="event-info">

        <p>5</p>

      </div>

    </div>

    <div class="col">

      <div class="event-box">

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

      </div>

      <div class="event-info">

        <p>6</p>

      </div>

    </div>

  </div>

</div>

添加元素的 CSS：

.row {

  width: 100%;

  display: flex;

}

.col {

  width: 33%;

  flex: 1;

}

编辑：CSS 网格可能是一个更简单的解决方案。