Horizontale Spalten mit mehrspaltigen Kopfzeilen

Question

Ich habe horizontal scrollende Spalten. Es gibt Text mit Kopfzeilen darin. Ich muss jeder Header machen Forsing eine neue Spalte und occupiing den ganzen Raum über Spalten beloning es:

oder so:

Aber das Beste, was ich tun kann, ist (übrigens, es scheitert in Firefox):

I tried to archive desired result using inline-blocks, aber das andere Problem dort aufgetreten. Ich habe auch einige Möglichkeiten mit negativen Margen, absolude Positionierung und transform versucht, aber mit keinem Erfolg: sie erlauben nicht über Spalten zu erhalten (außer absolute mit Conteiner Kontext: es vergisst Spalten-basierte horizontale Positionierung).

Simpliest Code 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>

Komplexere Version: 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>

Wenn Sie möchten, dass alle Spalten in derselben Breite CSS zur Klasse hinzufügen 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

Mit dieser einfachen Methode

.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>

ethode