複数列ヘッダーを含む水平列

Question

私は水平スクロール列を持っています。それらの内部にヘッダーを含むテキストがあります。ちなみに（

しかし、私ができる最善のことは、次のとおりです。

かそこら：私は、各ヘッダは、新しい列をforsingし、それにbeloning列の上のすべてのスペースをoccupiingようにする必要がありそれは）Firefoxで失敗：I tried to archive desired result using inline-blocksが、他の問題が発生した

。私は負のマージンでいくつかの方法を試してみましたが、ポジショニングとtransformは成功しましたが、成功しませんでした。（conteinerコンテキストでabsoluteを除く：列ベースの水平位置を忘れています。

最も単純コード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>

あなたは同じ幅のすべての列が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>

クラスにCSSを追加したい場合

ethod