html - 在 CSS 中，“使 div 充当列”是什么意思？意思是？并将 div 居中

Question

我的问题是，我如何制作两个div 标记，它们用作列？

另一个问题是如何使 div 元素仅使用页面宽度的 60%并将 div 在页面内居中？是不是像 div{ margin:auto;width:60%;}？

标签： htmlcss

Answer 1

设置列布局的最简单方法是简单地让父容器具有width百分比。例如，如果您想要两列，您将拥有width: 50%. 如果您不确定所需的百分比值，可以通过除以100%所需的列数来计算calc()：

width: calc(100% / 3);  -- 3 columns (33.33%)

至于设置一个以 a 为中心的元素，60% width您需要做的就是设置：

margin: 0 auto;
width: 60%;

这两个都可以在下面看到：

.container {
  display: flex;
  background: green;
  margin: 0 auto;
  width: 60%;
}

.parent {
  width: 50%;
  border: 1px solid #626262;
  padding: 10px;
}

.child {
  background: cyan;
  margin: 20px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

<div class="container">
  <div class="parent left-column">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
  </div>
  <div class="parent right-column">
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
  </div>
</div>