html - 在同一页面上进行两种不同的列布局

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

3列布局有效，但我无法使4列有效。为4列布局创建单独的类不起作用

CSS 3列

  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”。哪个似乎不起作用

最佳答案

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>