5

我正在尝试在我的页面上创建类似报纸的专栏。但是，我的页面包含表格，并且在 IE、Chrome、Safari 和 Opera 中，表格被分成两个不同的列；这不是我想要的行为。如果有一张桌子，我想把它完全放在一列中。这是一些代码：

.newspaper {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 5px; /* Chrome, Safari, Opera */
    -moz-column-gap: 5px; /* Firefox */
    column-gap: 5px;
}
<div class="newspaper">
  <table>
    <tr><td>Table Row 1</td></tr>
    <tr><td>Table Row 2</td></tr>
    <tr><td>Table Row 3</td></tr>
    <tr><td>Table Row 4</td></tr>
  </table>
  <p>Paragraph</p>
</div>

查看问题和解决问题的一种简单方法是使用 Chrome 并转到http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap并将代码粘贴到我的示例中。如果您尝试使用 Firefox，您会看到该表完全位于左列中。

4

2 回答 2

4

添加column-break-inside: avoid;到您的表中：

.newspaper {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 10px; /* Chrome, Safari, Opera */
    -moz-column-gap: 10px; /* Firefox */
    column-gap: 10px;
    border:dotted 1px #ccc;
}
.newspaper table {
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid;
    column-break-inside:avoid;
}
<div class="newspaper">
  <table>
    <tr><td>Table Row 1</td></tr>
    <tr><td>Table Row 2</td></tr>
    <tr><td>Table Row 3</td></tr>
    <tr><td>Table Row 4</td></tr>
  </table>
  <p>Paragraph</p>
</div>

于 2014-10-13T05:00:41.317 回答
0

我不是 100% 想在这里完成什么......

如果您不想要 2 列，只需删除 css。http://plnkr.co/edit/UtvHv0V9cydAfnO4jFwH?p=preview

如果您希望段落位于右侧，则使表格向左浮动。 http://plnkr.co/edit/52ly416gGmtHhAZSyrC3?p=preview

table{
    float:left;
}

p{
    position:relative;
    left: 20px;
}
于 2014-10-13T04:49:22.037 回答