html - 在同一页面上制作两种不同的栏目布局

Question

我需要在同一页面上分隔列布局。一个有 3 列，另一个有 4 列。

3 列布局可以工作，但我无法让 4 列布局工作。为 4 列布局制作一个单独的类不起作用

3 列的 css

  float: left;
  width: 32.55%;
  padding-right: 5px;
}



/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  padding: 5px;

}

我希望为 4 列布局创建一个不同的类。例如 class="4columns"。这似乎不起作用

Answer 1

Flexbox 为您提供了一种简单的方法来实现您想要的任何空间划分。

只需将 display: flex; 应用到您的容器中，直接子元素(在本例中为列)就变成了灵活的元素。有很多有用的配置选项，但如果您只想控制列的宽度，flex-basis 效果很好。

一个很好的资源:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

* {
  box-sizing-border-box;
}

.my-columns {
  display: flex;
  border: 2px solid black;
  margin-bottom: 20px;
}

.column {
  padding: 20px;
  border: 2px solid red;
}

.my-columns-3 .column {
  flex-basis: 33.333%;
}

.my-columns-4 .column {
  flex-basis: 25%;
}

<div class="my-columns my-columns-3">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

<div class="my-columns my-columns-4">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
  <div class="column">Column 4</div>
</div>