css - 当 div 超出屏幕时，如何在同一行中保持水平列？

Question

我无法在同一(水平)列中保留多个 div。我试过 display: inline-block; css 代码，它一直有效，直到 div 水平延伸超过屏幕。然后走出屏幕的div返回到下一列。如何使 div 保持在同一列上，即使它们超出了屏幕？是否有一行 css 代码强制所有的 div 保持在同一水平列中？我还没有找到答案，所以感谢您的帮助! :)

Answer 1

您可以尝试表格布局。

table-layout: fixed; 使所有列的宽度相等。

.outer{
display: table;
table-layout: fixed;
width: 100%;
}
.outer div[class*="col"]{
display: table-cell;
padding: 20px;
}
.col1{ background: red;}
.col2{ background: blue;}
.col3{ background: yellow;}
.col4{ background: green;}

<div class="outer">
<div class="col1">
    column1 
</div>
<div class="col2">
    column2
</div>
<div class="col3">
    column3 
</div>
<div class="col4">
    column4 
</div>
</div>