时间戳

首页 > 解决方案 > 如何控制列中div的数量

html - 如何控制列中div的数量

问题描述

我正在尝试完成一个编码挑战，该挑战产生包含四个框的三列布局，以便中心列保持 2 个框，而在桌面上查看时，周围列保持 1 个垂直居中的框：

一列包含移动设备上的所有四个框：

我苦苦挣扎的地方是弄清楚桌面布局。

我研究了网格、flexbox 和列，但我不清楚哪个（如果有的话）适合这个项目。有什么建议的方法吗？（通过“方法”，我不是要求特定代码，只是您推荐的理想布局方法。）

这是我的HTML，如下所示：

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link media="screen" rel="stylesheet" href="stylesheet.css">
  <title>Frontend Mentor | Four card feature section</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet  -->
  <style>
    .attribution {
      font-size: 11px;
      text-align: center;
    }

    .attribution a {
      color: hsl(228, 45%, 44%);
    }
  </style>
</head>

<body>
  <div class="main-container">
    <div class="top-text">
      <div>Reliable, efficient delivery</div>
      <div>Powered by Technology</div>
      <div>
        Our Artificial Intelligence powered tools use millions of project data points
        to ensure that your project is successful
      </div>
    </div>
    <div class="info-boxes">
      <div class="info-box">
        Supervisor
        Monitors activity to identify project roadblocks
      </div>
      <div class="info-box">
        Team Builder
        Scans our talent network to create the optimal team for your project
      </div>
      <div class="info-box">
        Karma
        Regularly evaluates our talent to ensure quality
      </div>
      <div class="info-box">
        Calculator
        Uses data from past projects to provide better delivery estimates
      </div>
    </div>
  </div>
  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="#">Aaron McDonald</a>.
    </p>
  </footer>
</body>

</html>

标签： htmlcssflexboxcss-grid

解决方案

我不确定这是否适用于每个浏览器，但至少在片段中它可以工作：

  • display: flex, flex-direction: column,flex-wrap: wrap;和justify-content: center;在容器上以获得列和垂直居中。
  • width: 30%（或更多）和page-break-inside: avoid;（为了避免它们被跨列拆分 - 这个属性也适用于列）在孩子身上
  • 在第一个和第三个孩子之后强制“分页符”（实际上是分栏符）（见下文）
  • 加上媒体查询重置这些分页符并将儿童的宽度设置为移动屏幕的全宽。

.info-boxes {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
}

.info-box {
  width: 30%;
  height: 100px;
  background: #ddd;
  margin: 5px 0;
  page-break-inside: avoid;
}

.info-box:nth-child(1),
.info-box:nth-child(3) {
  page-break-after: always;
}

@media screen and (max-width: 480px) {
  .info-box {
    width: 100%;
  }
  .info-box:nth-child(1),
  .info-box:nth-child(3) {
    page-break-after: auto;
  }
}
<div class="info-boxes">
  <div class="info-box">
    Supervisor Monitors activity to identify project roadblocks
  </div>
  <div class="info-box">
    Team Builder Scans our talent network to create the optimal team for your project
  </div>
  <div class="info-box">
    Karma Regularly evaluates our talent to ensure quality
  </div>
  <div class="info-box">
    Calculator Uses data from past projects to provide better delivery estimates
  </div>
</div>

推荐阅读