Question

更新到Chrome 52后，我正在处理的网站会错误地呈现列。我使用display: inline-block'hack'强制列中断/强制文本流。它曾经在最新的浏览器（Chrome，Firefox，IE 11）中正常工作，但从Chrome 52开始就停止工作。版本51很好。

FF和IE很好地分割列，Chrome 52只显示1列。

我尝试使用display: table;但没有取得多大成功。

.text-2-col {
  -ms-column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  font-size: 1.3rem;
}

.text-2-col .column {
  display: inline-block; 
  width: 100%;
}

<div class="text-2-col" style="font-size: 1.4rem;">
  <span class="column"><b>Where we went, what we did:</b>
  <br>
  <b>1.day</b>
  <br>
  <ul>
    <li>Took a ride from Keflavik airport through Akranes around Akrafjall to our accomodation in the north.&nbsp;</li>
    <li>On the way we stopped by at the Kolugljúfur waterfall and Pingeyrar chuch. Around 11 p.m., during our 'night' hike, we saw an artic fox behind our house.</li>
  </ul>
  <b>2.day</b>
  <br>
  <ul>
    <li>Took a ride around the Siglufjörður, a small fishing town on the northern coast, where we had a quick stop, and then through the second largest city in Iceland - Akureyri</li>
    <li>We visited Glaumbær &nbsp;- Skagafjörður Folk Museum and had a cake and a cup of coffee in a lovely cafe in a traditional house nearby.</li>
    <li>Then we went to see the Goðafoss, one of the most spectacular waterfalls in Iceland.</li>
  </ul>
  </span>
  <span class="column"><b>3.day</b>
  <br>
  <ul>
    <li>ay of whales and puffins! Early in the morning we went to Husavik and took a boat to observe the whales and puffins. I saw the tail and white belly of a whale and bunch of puffins. Our boat-guide told us not to eat any whale or puffin, because of the quickly decreasing number of whales living in the ocean around Iceland, and I agreed. Nice guy, I thought.</li>
  </ul>
  <ul>
    <li>Later that day we hiked Krafla vulcano and saw a nice Viti Crater along the way. But the highlight of the day came only in the evening -- bathing in Mývatn Nature Baths -- eutrophic lake situated in an area of active volcano activity. That was the best time on Iceland for me. Steaming natural water, fresh air, bathing till late at night. What could be better?</li>
  </ul>
  <b>4.day</b>
  <br>
  <ul>
    <li>Day of lava! Went to the Leirhnjukur Lava Fields and Hverir steam fields. There was a collection of steam fumaroles, some bubbling mud pots and lots of interesting colours.</li>
    <li>Took a ride to the east - our next accomodation at Gíslastaðir awaits.</li>
  </ul>
  </span>
</div>

相关CodePen：http://codepen.io/anon/pen/wWkWgp

Answer 1

我知道这是一个较旧的问题，但我遇到了类似的问题，并且想要使用列规则，所以使用flex并不是一个选项。我目前的解决方案是使用webkit的媒体查询：

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .text-2-col .column {
    display: block; 
    -webkit-column-break-inside: avoid;      
  }
}

我已更新了codepen：https://codepen.io/anon/pen/yoyWVW

Answer 2

您可以删除：

.text-2-col .column {
  display: inline-block; 
  width: 100%;
}

它按预期工作。

＆＃13;

.text-2-col {
  -ms-column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  font-size: 1.3rem;
}

＆＃13;

<div class="text-2-col" style="font-size: 1.4rem;">
  <span class="column">
<b>
  Where we went, what we did:
 </b>
 <br>
<b>
  1.day
 </b>
 <br>
<ul>
<li>
   Took a ride from Keflavik airport through Akranes around Akrafjall to our accomodation in the north.&nbsp;
  </li>
<li>
  On the way we stopped by at the Kolugljúfur waterfall and Pingeyrar chuch. Around 11 p.m., during our 'night' hike, we saw an artic fox behind our house.
  </li>
</ul>
<b>
  2.day
 </b>
 <br>
<ul>
<li>
   Took a ride around the Siglufjörður, a small fishing town on the northern coast, where we had a quick stop, and then through the second largest city in Iceland - Akureyri
  </li>
<li>
   We visited Glaumbær &nbsp;- Skagafjörður Folk Museum and had a cake and a cup of coffee in a lovely cafe in a traditional house nearby.
  </li>
<li>
   Then we went to see the Goðafoss, one of the most spectacular waterfalls in Iceland.
  </li>
</ul>
</span>



  <span class="column">
<b>
  3.day
 </b>
 <br>
<ul>
<li>
   Day of whales and puffins! Early in the morning we went to Husavik and took a boat to observe the whales and puffins. I saw the tail and white belly of a whale and bunch of puffins. Our boat-guide told us not to eat any whale or puffin, because of the quickly decreasing number of whales living in the ocean around Iceland, and I agreed. Nice guy, I thought.
  </li>
</ul>
<ul>
<li>
   Later that day we hiked Krafla vulcano and saw a nice Viti Crater along the way. But the highlight of the day came only in the evening -- bathing in Mývatn Nature Baths -- eutrophic lake situated in an area of active volcano activity. That was the best time on Iceland for me. Steaming natural water, fresh air, bathing till late at night. What could be better?
  </li>
</ul>
<b>4.day</b>
 <br>
<ul>
<li>Day of lava! Went to the Leirhnjukur Lava Fields and Hverir steam fields. There was a collection of steam fumaroles, some bubbling mud pots and lots of interesting colours.</li>
<li>Took a ride to the east - our next accomodation at Gíslastaðir awaits.</li>
</ul>
</span>
</div>

＆＃13;

或者，您可以使用flexbox。

＆＃13;

.text-2-col {
  font-size: 1.3rem;
  display: flex;
}
.text-2-col .column {
  flex: 1;
}

＆＃13;

<div class="text-2-col" style="font-size: 1.4rem;">
  <span class="column">
<b>
  Where we went, what we did:
 </b>
 <br>
<b>
  1.day
 </b>
 <br>
<ul>
<li>
   Took a ride from Keflavik airport through Akranes around Akrafjall to our accomodation in the north.&nbsp;
  </li>
<li>
  On the way we stopped by at the Kolugljúfur waterfall and Pingeyrar chuch. Around 11 p.m., during our 'night' hike, we saw an artic fox behind our house.
  </li>
</ul>
<b>
  2.day
 </b>
 <br>
<ul>
<li>
   Took a ride around the Siglufjörður, a small fishing town on the northern coast, where we had a quick stop, and then through the second largest city in Iceland - Akureyri
  </li>
<li>
   We visited Glaumbær &nbsp;- Skagafjörður Folk Museum and had a cake and a cup of coffee in a lovely cafe in a traditional house nearby.
  </li>
<li>
   Then we went to see the Goðafoss, one of the most spectacular waterfalls in Iceland.
  </li>
</ul>
</span>



  <span class="column">
<b>
  3.day
 </b>
 <br>
<ul>
<li>
   Day of whales and puffins! Early in the morning we went to Husavik and took a boat to observe the whales and puffins. I saw the tail and white belly of a whale and bunch of puffins. Our boat-guide told us not to eat any whale or puffin, because of the quickly decreasing number of whales living in the ocean around Iceland, and I agreed. Nice guy, I thought.
  </li>
</ul>
<ul>
<li>
   Later that day we hiked Krafla vulcano and saw a nice Viti Crater along the way. But the highlight of the day came only in the evening -- bathing in Mývatn Nature Baths -- eutrophic lake situated in an area of active volcano activity. That was the best time on Iceland for me. Steaming natural water, fresh air, bathing till late at night. What could be better?
  </li>
</ul>
<b>4.day</b>
 <br>
<ul>
<li>Day of lava! Went to the Leirhnjukur Lava Fields and Hverir steam fields. There was a collection of steam fumaroles, some bubbling mud pots and lots of interesting colours.</li>
<li>Took a ride to the east - our next accomodation at Gíslastaðir awaits.</li>
</ul>
</span>
</div>

＆＃13;

Answer 3

我今天遇到了这个问题，要解决此问题，我最终将列包装在一个块元素中，如下所示：

.text-2-col {
  -ms-column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  font-size: 1.3rem;
}

.text-2-col .column {
  display: inline-block; 
  width: 100%;
}
<div class="text-2-col" style="font-size: 1.4rem;">
  <span class="column">{...}</span>
  <span class="column">{...}</span>
</div>

成为

.text-2-col {
  -ms-column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  font-size: 1.3rem;
}

.text-2-col .column {
  display: inline-block; 
  width: 100%;
}
<div class="text-2-col" style="font-size: 1.4rem;">
  <div class="column-container">
    <span class="column">{...}</span>
  </div>
  <div class="column-container">
    <span class="column">{...}</span>
  </div>
</div>

它确实可以解决我在最新的Chrome和FF中测试过的问题。

Chrome 52 CSS与内联块和列有关

3 个答案: