帶固定標題的水平CSS柱子

Question

如何在每個文本塊上安排固定頂部標題的水平列？ 文本塊在溢出時相互重疊。

我希望看到像這個截圖

您可以在jsFiddle

或此看到問題：

p { 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    outline: 1px dotted gray; 
 
    height: 200px; 
 
    width: 400px; 
 
    white-space: nowrap; 
 
    overflow-x: auto; 
 
} 
 

 
.column { 
 
    outline: 1px dotted green; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    white-space: normal; 
 
    column-width: 100vw; 
 
    width: min-content; 
 
    min-width: 50%; 
 
    height: 100%; 
 
} 
 

 
.header { 
 
    column-span: all; 
 
    white-space: nowrap; 
 
}

<div class="container"> 
 
    <div class="column"> 
 
     <h2 class="header">Lorem ipsum dolor sit..</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, dicta aut a at sunt quasi aspernatur. Ullam porro, consequatur est quo voluptatum atque. Delectus, dicta, saepe? Delectus sapiente officiis soluta maiores voluptatum voluptates culpa. Libero consectetur aliquid temporibus, dignissimos</p> 
 
    </div> 
 
    
 
    <div class="column"> 
 
     <h2 class="header">Lorem</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, explicabo.</p> 
 
    </div> 
 
     
 
    <div class="column"> 
 
     <h2 class="header">Lorem</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> 
 
    </div> 
 
     
 
    <div class="column"> 
 
     <h2 class="header">Lorem</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> 
 
    </div> 
 
</div>

還是什麼呢另一方式存在？

Answer 1

https://jsfiddle.net/1x22mtkt/1/

檢查出來。您可以根據需要調整最小高度。我的建議是將其設置爲最大的列，以便每列的大小相同。

p { 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    outline: 1px dotted gray; 
 
    
 
    width: 400px; 
 
    white-space: nowrap; 
 
    overflow-x: auto; 
 
} 
 

 
.column { 
 
    outline: 1px dotted gray; 
 
    min-height:230px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    white-space: normal; 
 
    column-width: 100vw; 
 
    width: min-content; 
 
    min-width: 60%; 
 
    height: 100%; 
 
     
 
} 
 

 
.column p{ 
 
    word-break: break-all; 
 
} 
 

 
.header { 
 
    column-span: all; 
 
    white-space: nowrap; 
 
}