html - 複数列ヘッダーを持つ水平列

Question

水平スクロール列があります。内部にヘッダーを持つテキストがいくつかあります。新しい列を作成し、それに属する列の上のすべてのスペースを占有する各ヘッダーを作成する必要があります。

とか、ぐらい：

しかし、私ができる最善のことは（ちなみに、Firefoxでは失敗します）：

sを使用して目的の結果をアーカイブしようとしinline-blockましたが、そこで別の問題が発生しました。また、負のマージン、絶対配置、および を使用していくつかの方法を試しましtransformたが、成功しませんでした:列の上に移動することはできません(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:ロシア語で同じ質問。

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

この簡単な方法を使用してください

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

方法

Answer 3

* {
  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>