Question

我有水平滚动列。其中有一些带有标题的文本。我需要让每个标题都放弃一个新列并占据列上面的所有空格：

左右：

但我能做的最好的事情是（顺便说一下，它在Firefox中失败了）：

我tried to archive desired result using inline-blocks，但另一个问题出现了。我还尝试了一些带负边距，绝对定位和using all_ts = std::tuple<typename extract_args<Ts>::type...>;的方法，但没有成功：它们不允许超越列（除了transform以及上下文：它忘记了基于列的水平定位）

最简单的代码https://jsfiddle.net/07n6L2yh/10/

＆＃13;

absolute

＆＃13;

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

＆＃13;

更复杂的版本：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

使用这个简单的方法

.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

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

带有多列标题的水平列

3 个答案: