具有固定标题的水平 CSS 列答案

【问题标题】：Horizontal CSS columns with fixed header具有固定标题的水平 CSS 列
【发布时间】：2016-11-29 02:59:46
【问题描述】：

如何在每个文本块上排列带有固定顶部标题的水平列？文本块在溢出时相互重叠。

我想在这个截图上看到类似的东西

你可以在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>

或者还有什么其他方式存在？

【问题讨论】：

您有 4 列，它们都设置为 min-width 50%，因此您的总最小宽度实际上是可用空间的 200%。当您尝试倒入 2 升时，不要抱怨您的 1 升杯子溢出...
我不知道我有多少列或文本。但我需要一个接一个地安排。不可能吗？

标签： html css overflow horizontal-scrolling

【解决方案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;
}

【讨论】：