我有一个包含表格的HTML / CSS双列布局。 Chrome和Edge都打破了表格,以提供平衡的列长度。但是,Firefox拒绝破桌。作为一种效果,一列比另一列长得多。
以下是一个示例:https://jsfiddle.net/jxk7f8er/6/ HTML:
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<table>
<tr><td>Bla</td><td>Bla</td></tr>
<tr><td>Bla</td><td>Bla</td></tr>
<tr><td>Bla</td><td>Bla</td></tr>
<tr><td>Bla</td><td>Bla</td></tr>
<tr><td>Bla</td><td>Bla</td></tr>
<tr><td>Bla</td><td>Bla</td></tr>
<tr><td>Bla</td><td>Bla</td></tr>
<tr><td>Bla</td><td>Bla</td></tr>
<tr><td>Bla</td><td>Bla</td></tr>
<tr><td>Bla</td><td>Bla</td></tr>
</table>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
CSS:
div{
column-count:2;
}
Chrome和Edge会渲染两列。 Firefox只渲染一列。
有没有办法让Firefox打破表格以实现平衡的多列布局?