带有固定标题的水平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/

检查一下。您可以根据需要调整 min-height 。我的建议是将它设置为你最大的列，以便每列的大小相同。

＆＃13;

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;