html怎么样做出两列布局页面,html – 两列弹性框布局

您可以为项目设置最大宽度,等于50％.无论如何,这将保持几乎相同的宽度.我说几乎是因为你也设置了边框.

为了保持宽度完全相同,您还必须为item设置Box-sizing：border-Box.

所以,你的代码将是：

.item {

border: 1px dashed blue;

height: 50px;

Box-sizing: border-Box;

max-width: 50%;

}

.container {

border: 1px solid red;

height: 300px;

display: flex;

flex-direction: column;

justify-content: flex-start;

flex-wrap: wrap;

}

.item {

border: 1px dashed blue;

height: 50px;

Box-sizing: border-Box;

max-width: 50%;

}

1

2

3

4

5

6

7

8