如何在延伸過屏幕時將同一行的水平列保留在同一行中？

Question

我無法在同一個（水平）列中保留多個div。我試過顯示器：inline-block; CSS代碼，它的工作原理直到div橫向延伸到屏幕上。然後，離開屏幕的div會返回到下一列。如何讓div保持在同一列上，即使它們伸出屏幕？是否有一行CSS代碼強制所有的div留在同一個水平列？我還沒有找到答案，所以謝謝你的幫助！ :)

Answer 1

您可以嘗試表佈局。

使所有列的寬度相等。

.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>