5

ページに新聞のようなコラムを作成しようとしています。しかし、私のページにはテーブルが含まれており、IE、Chrome、Safari、および Opera では、テーブルが 2 つの異なる列に分割されています。これは私が望んでいる動作ではありません。テーブルがある場合は、完全に 1 つの列に収めたいと思います。ここにいくつかのコードがあります：

.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 に答える