0

我使用列数将文本拆分为列并分配显示：inline-block; 用于子元素以排除块内的文本换行。结果，渲染时出现了奇怪的行为，由于某种原因，在列块之后出现了一个大缩进。这是chrome的错误还是我做错了什么？有没有办法解决这个问题？

Chrome 63.0.3239.108，Linux Mint

PS：在 Firefox 中一切正常

.container {
  padding: 20px;
  max-width: 1024px;
}

.columns {
  margin: 0;
  column-count: 2;
  column-gap: 20px;
}

p {
  margin: 0 0 1em;
  line-height: 1.5;
  display: inline-block;
}
<div class="container">
  <div class="columns">
    <p>Lorem ipsum dolor amet roof party mumblecore raw denim lyft paleo ennui. Tbh PBR&B mustache, cray palo santo adaptogen sustainable iceland echo park yr kinfolk before they sold out pinterest. Salvia semiotics before they sold out, pitchfork next level vape unicorn. Pinterest poutine lumbersexual seitan bespoke, crucifix skateboard intelligentsia ramps.</p>
    <p>Small batch lo-fi celiac, chillwave fingerstache lumbersexual gochujang succulents. Pitchfork small batch cornhole plaid flannel mlkshk 8-bit blog squid trust fund keytar portland asymmetrical skateboard intelligentsia. Tumeric beard succulents art party, meggings chillwave swag hashtag gochujang coloring book direct trade leggings sriracha pok pok. Cornhole food truck schlitz, snackwave art party hot chicken microdosing kale chips disrupt church-key.</p>
    <p>Unicorn asymmetrical actually lomo whatever typewriter fixie dreamcatcher vegan pabst everyday carry. Salvia next level hella vegan williamsburg pug. Pabst DIY chartreuse disrupt occupy. Cornhole crucifix PBR&B thundercats gochujang tacos fanny pack you probably haven't heard of them chillwave normcore kitsch wayfarers dreamcatcher man bun echo park. La croix normcore cronut prism fam knausgaard roof party blog kinfolk try-hard etsy raclette ugh quinoa. PBR&B kickstarter pabst jean shorts. 90's cray vexillologist pabst.</p>
  </div>
    
  <p>Sriracha actually crucifix snackwave try-hard fam twee tilde kitsch lo-fi af. Af freegan cliche portland. Distillery pop-up whatever affogato lyft chicharrones tacos snackwave. Art party single-origin coffee iPhone palo santo fam XOXO gochujang chambray leggings venmo neutra cold-pressed direct trade whatever. Shaman post-ironic aesthetic gochujang.</p>
</div>

4

1 回答 1

1

您可以使用 CSS 属性（例如break-inside）来指定内容不应分布在多个列中。

.container {
  padding: 20px;
  max-width: 1024px;
}

.columns {
  margin: 0 0 1em;
  column-count: 2;
  column-gap: 20px;
}

p {
  margin: 0 0 1em;
  line-height: 1.5;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside:avoid;
  -moz-page-break-inside:avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
}
<div class="container">
  <div class="columns">
    <p>Lorem ipsum dolor amet roof party mumblecore raw denim lyft paleo ennui. Tbh PBR&B mustache, cray palo santo adaptogen sustainable iceland echo park yr kinfolk before they sold out pinterest. Salvia semiotics before they sold out, pitchfork next level vape unicorn. Pinterest poutine lumbersexual seitan bespoke, crucifix skateboard intelligentsia ramps.</p>
    <p>Small batch lo-fi celiac, chillwave fingerstache lumbersexual gochujang succulents. Pitchfork small batch cornhole plaid flannel mlkshk 8-bit blog squid trust fund keytar portland asymmetrical skateboard intelligentsia. Tumeric beard succulents art party, meggings chillwave swag hashtag gochujang coloring book direct trade leggings sriracha pok pok. Cornhole food truck schlitz, snackwave art party hot chicken microdosing kale chips disrupt church-key.</p>
    <p>Unicorn asymmetrical actually lomo whatever typewriter fixie dreamcatcher vegan pabst everyday carry. Salvia next level hella vegan williamsburg pug. Pabst DIY chartreuse disrupt occupy. Cornhole crucifix PBR&B thundercats gochujang tacos fanny pack you probably haven't heard of them chillwave normcore kitsch wayfarers dreamcatcher man bun echo park. La croix normcore cronut prism fam knausgaard roof party blog kinfolk try-hard etsy raclette ugh quinoa. PBR&B kickstarter pabst jean shorts. 90's cray vexillologist pabst.</p>
  </div>
    
  <p>Sriracha actually crucifix snackwave try-hard fam twee tilde kitsch lo-fi af. Af freegan cliche portland. Distillery pop-up whatever affogato lyft chicharrones tacos snackwave. Art party single-origin coffee iPhone palo santo fam XOXO gochujang chambray leggings venmo neutra cold-pressed direct trade whatever. Shaman post-ironic aesthetic gochujang.</p>
</div>

于 2018-01-26T09:07:50.290 回答