具有多列標題的水平列

Question

我有水平滾動列。裏面有一些帶有標題的文字。我需要將每頭forsing新列和occupiing以上beloning把它列的所有空間：

左右：

但我能做的最好的事情是（順便說一下，在Firefox失敗）：

我tried to archive desired result using inline-blocks，但其他問題發生在那裏。我也嘗試了一些負邊距，絕對定位和transform的方法，但沒有成功：它們不允許超出列（除了具有有爭議的上下文的absolute：它忘記了基於列的水平定位）。

Simpliest代碼https://jsfiddle.net/07n6L2yh/10/

.container { 
 
    outline: 1px dotted gray; 
 
    height: 200px; 
 
    -moz-column-width: 10em; 
 
    column-width: 10em; 
 
    -moz-column-fill: auto; 
 
    column-fill: auto; 
 
    overflow-x: auto; 
 
} 
 

 
h2 { 
 
    break-before: column; /* Firefox? */ 
 
    border-bottom: 1px solid; 
 
    margin: 0 0 .25em; 
 
} 
 

 
p { 
 
    margin: 0; 
 
}

<div class="container"> 
 
    <h2>Lorem ipsum</h2> 
 
    <p>Lorem ipsum dolor sit amet, eu eirmod complectitur pri, agam libris euripidis no quo. In cum adolescens necessitatibus, et hinc nominati indoctum his, idque prompta moderatius cu per. Quo ei novum utroque, ius ex graecis volutpat quaerendum! Ea assum erroribus accommodare pri, simul omnesque scaevola has cu, an putant tacimates ius. Ius soluta nonumes ei? Ex modus eligendi repudiandae ius, nec cu quem delicatissimi.</p> 
 

 
    <h2>AAA</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, explicabo.</p> 
 

 
    <h2>Dolor sit</h2> 
 
    <p>Lorem ipsum dolor sit amet, eu eirmod complectitur pri, agam libris euripidis no quo. In cum adolescens necessitatibus, et hinc nominati indoctum his, idque prompta moderatius cu per. Quo ei novum utroque, ius ex graecis volutpat quaerendum!</p> 
 

 
    <h2>BBB</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> 
 

 
    <h2>CCC</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> 
 
</div>

更復雜的版本：https://jsfiddle.net/07n6L2yh/11/

PS：Same question in russian.

Answer 1

.container { 
 
    outline: 1px dotted red; 
 
    height: 200px; 
 
    min-width: 650px; 
 
    display: flex; 
 
    overflow-x: scroll; 
 
} 
 

 
h2 { 
 
    break-before: column; /* Firefox? */ 
 
    border-bottom: 1px solid; 
 
    margin: 0 0 .25em; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    -moz-column-width: 7em; 
 
    column-width: 7em; 
 
    -moz-column-rule: fill; 
 
    column-rule: fill; 
 
    overflow-x: auto; 
 
    display: block; 
 
    font-size: 10px; 
 
} 
 
.each-sec{ 
 
    padding: 1em; 
 
}

<div class="container"> 
 
    <div class="each-sec"> 
 
<h2>Lorem ipsum</h2> 
 
<div> 
 
    <p>Lorem ipsum dolor sit amet, eu eirmod complectitur pri, agam libris euripidis no quo. In cum adolescens necessitatibus, et hinc nominati indoctum his, idque prompta moderatius cu per. Quo ei novum utroque, ius ex graecis volutpat quaerendum! Ea assum erroribus accommodare pri, simul omnesque scaevola has cu, an putant tacimates ius.</p> 
 
</div> 
 
    </div> 
 
    <div class="each-sec"> 
 
    <h2>AAA</h2> 
 
    <div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, explicabo.</p> 
 
    </div> 
 
    </div> 
 
    <div class="each-sec"> 
 
    <h2>Dolor sit</h2> 
 
    <div> 
 
    <p>Lorem ipsum dolor sit amet, eu eirmod complectitur pri, agam libris euripidis no quo. In cum adolescens necessitatibus, et hinc nominati indoctum his, idque prompta moderatius cu per. Quo ei novum utroque, ius ex graecis volutpat quaerendum!</p> 
 
    </div> 
 
    </div> 
 
    <div class="each-sec"> 
 
<h2>Lorem ipsum</h2> 
 
<div> 
 
    <p>Lorem ipsum dolor sit amet, eu eirmod complectitur pri, agam libris euripidis no quo. In cum adolescens necessitatibus, et hinc nominati indoctum his, idque prompta moderatius cu per. Quo ei novum utroque, ius ex graecis volutpat quaerendum! Ea assum erroribus accommodare pri, simul omnesque scaevola has cu, an putant tacimates ius.</p> 
 
</div> 
 
    </div> 
 
</div>

如果你想在相同寬度的所有列添加CSS到類each-div

.each-sec{ 
    padding: 1em; 
    flex: 1; 
} 

Answer 2

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    width: 600px; 
 
    border: 1px solid; 
 
    
 
    white-space: nowrap; 
 
    
 
    overflow-x: scroll; 
 
} 
 

 
.article { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    outline: 1px solid red; 
 
} 
 

 
.article__title { 
 
    font-size: 200%; 
 
    border-bottom: 1px solid; 
 
} 
 

 
.article__body { 
 
    -webkit-column-width: 10em; 
 
    -moz-column-width: 10em; 
 
      column-width: 10em; 
 
    white-space: normal; 
 
}

<div class="container"> 
 
    <div class="article"> 
 
    <h1 class="article__title">Title</h1> 
 
    <div class="article__body"> 
 
     <p>SS Washingtonian was a cargo ship launched in 1913 by the Maryland Steel Company, one of eight sister ships for the American-Hawaiian Steamship Company and the largest</p> 
 
    </div> 
 
    </div> 
 
    <div class="article"> 
 
    <h1 class="article__title">Title</h1> 
 
    <div class="article__body"> 
 
     <p>SS Washingtonian was a cargo ship launched in 1913 by the Maryland Steel Company, one of eight sister ships for the American-Hawaiian Steamship Company and the largest cargo ship under American registry at the time. During the American occupation of Veracruz in April 1914, the ship was chartered by the Department of the Navy for service as a refrigerated supply ship for the U.S. fleet stationed off the Mexican coast cargo ship under American registry at the time. During the American occupation of Veracruz in April 1914, the ship was chartered by the Department of the Navy for service as a refrigerated supply ship for the U.S. fleet stationed off the Mexican coast..</p> 
 
    </div> 
 
    </div> 
 
    <div class="article"> 
 
    <h1 class="article__title">Title</h1> 
 
    <div class="article__body"> 
 
     <p>SS Washingtonian was a cargo ship launched in 1913 by the Maryland Steel Company, one of eight sister ships for the American-Hawaiian Steamship Company and the largest cargo ship under American registry at the time. During the American occupation of Veracruz in April 1914, the ship was chartered by the Department of the Navy for service as a refrigerated supply ship for the U.S. fleet stationed off the Mexican coast.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

使用這種簡單的方法

.container { 
 
    outline: 1px dotted gray; 
 
    height: 200px; 
 
    -moz-column-width: 10em; 
 
    column-width: 10em; 
 
    -moz-column-rule: fill; 
 
    column-rule: fill; 
 
    overflow-x: auto; 
 
} 
 

 
h2 { 
 
    break-before: column; /* Firefox? */ 
 
    border-bottom: 1px solid; 
 
    margin: 0 0 .25em; 
 
} 
 

 
p { 
 
    margin: 0; 
 
} 
 
.left 
 
{ 
 
min-height: 100%; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    <h2>Lorem ipsum</h2> 
 
    <p>Lorem ipsum dolor sit amet, eu eirmod complectitur pri, agam libris euripidis no quo. In cum adolescens necessitatibus, et hinc nominati indoctum his, idque prompta moderatius cu per. Quo ei novum utroque, ius ex graecis volutpat quaerendum! Ea assum erroribus accommodare pri, simul omnesque scaevola has cu, an putant tacimates ius. Ius soluta nonumes ei? Ex modus eligendi repudiandae ius, nec cu quem delicatissimi.</p> 
 
</div> 
 
<div class="left"> 
 
    <h2>AAA</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, explicabo.</p> 
 
</div> 
 
    <h2>Dolor sit</h2> 
 
    <p>Lorem ipsum dolor sit amet, eu eirmod complectitur pri, agam libris euripidis no quo. In cum adolescens necessitatibus, et hinc nominati indoctum his, idque prompta moderatius cu per. Quo ei novum utroque, ius ex graecis volutpat quaerendum!</p> 
 
<div class="left"> 
 
    <h2>BBB</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> 
 
</div> 
 
<div class="left"> 
 
    <h2>CCC</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></div> 
 
</div>

ethod