据我所知，css中没有colspan，但在不久的将来会有用于多列布局的column-span，但由于它只是CSS3中的草稿，你可以在这里检查它。不管怎样，你可以使用div和span来解决这个问题。

这就是HTML:

<div class="table">
  <div class="row">
    <span class="cell red first"></span>
    <span class="cell blue fill"></span>
    <span class="cell green last"></span>
  </div>
</div>
<div class="table">
  <div class="row">
    <span class="cell black"></span>
  </div>
</div>

这就是css:

  /* this is to reproduce table-like structure
     for the sake of table-less layout. */
  .table { display:table; table-layout:fixed; width:100px; }
  .row { display:table-row; height:10px; }
  .cell { display:table-cell; }

  /* this is where the colspan tricks works. */
  span { width:100%; }

  /* below is for visual recognition test purposes only. */
  .red { background:red; }
  .blue { background:blue; }
  .green { background:green; }
  .black { background:black; }

  /* this is the benefit of using table display, it is able 
     to set the width of it's child object to fill the rest of 
     the parent width as in table */
  .first { width: 20px; }
  .last { width: 30px; }
  .fill { width: 100%; }

使用这个技巧的唯一原因是为了获得表格布局行为的好处，如果仅仅设置div和span宽度到一定的百分比并不能满足我们的设计要求，我就会使用它。

但如果你不需要从表格布局行为中获益，那么durilai的答案将足够适合你。

<div style="width: 100%;">
    <div style="float: left; width: 33%;">Row 1 - Cell 1</div>
    <div style="float: left; width: 34%;">Row 1 - Cell 2</div>
    <div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>

提供一个最新的答案:今天最好的方法是使用css网格布局，像这样:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "top-left top-middle top-right"
    "bottom bottom bottom"
}

.item-a {
  grid-area: top-left;
}
.item-b {
  grid-area: top-middle;
}
.item-c {
  grid-area: top-right;
}
.item-d {
  grid-area: bottom;
}

以及HTML

<div class="container">
  <div class="item-a">1</div>
  <div class="item-b">2</div>
  <div class="item-c">3</div>
  <div class="item-d">123</div>
</div>

这不是CSS权限的一部分。colspan描述页面内容的结构，或者为表中的数据赋予一些含义，这是HTML的工作。

CSS属性“column-count”、“column-gap”和“column-span”可以做到这一点，使伪表的所有列保持在相同的包装器中(HTML保持漂亮和整洁)。

唯一需要注意的是，您只能定义1列或所有列，而且列-span在Firefox中还不能工作，因此需要一些额外的CSS来确保它能够正确显示。 https://www.w3schools.com/css/css3_multiple_columns.asp

.split-me { -webkit-column-count: 3; -webkit-column-gap: 0; -moz-column-count: 3; -moz-column-gap: 0; column-count: 3; column-gap: 0; } .cols { /* column-span is 1 by default */ column-span: 1; } div.three-span { column-span: all !important; } /* alternate style for column-span in Firefox */ @-moz-document url-prefix(){ .three-span { position: absolute; left: 8px; right: 8px; top: auto; width: auto; } } <p>The column width stays fully dynamic, just like flex-box, evenly scaling on resize.</p> <div class='split-me'> <div class='col-1 cols'>Text inside Column 1 div.</div> <div class='col-2 cols'>Text inside Column 2 div.</div> <div class='col-3 cols'>Text inside Column 3 div.</div> <div class='three-span'>Text div spanning 3 columns.</div> </div> <style> /* Non-Essential Visual Styles */ html * { font-size: 12pt; font-family: Arial; text-align: center; } .split-me>* { padding: 5px; } .cols { border: 2px dashed black; border-left: none; } .col-1 { background-color: #ddffff; border-left: 2px dashed black; } .col-2 { background-color: #ffddff; } .col-3 { background-color: #ffffdd; } .three-span { border: 2px dashed black; border-top: none; text-align: center; background-color: #ddffdd; } </style>

如果你来这里是因为你必须打开或关闭colspan属性(比如移动布局):

复制<td>，只显示所需colspan的值:

table.colspan--on td.single { display: none; } table.colspan--off td.both { display: none; } <!-- simple table --> <table class="colspan--on"> <thead> <th>col 1</th> <th>col 2</th> </thead> <tbody> <tr> <!-- normal row --> <td>a</td> <td>b</td> </tr> <tr> <!-- the <td> spanning both columns --> <td class="both" colspan="2">both</td> <!-- the two single-column <td>s --> <td class="single">A</td> <td class="single">B</td> </tr> <tr> <!-- normal row --> <td>a</td> <td>b</td> </tr> </tbody> </table> <!-- that's all -->   <!-- stuff only needed for making this interactive example looking good: --> <br><br> <button onclick="toggle()">Toggle colspan</button> <script>/*toggle classes*/var tableClasses = document.querySelector('table').classList; function toggle() { tableClasses.toggle('colspan--on'); tableClasses.toggle('colspan--off'); } </script> <style>/* some not-needed styles to make this example more appealing */ td {text-align: center;} table, td, th {border-collapse: collapse; border: 1px solid black;}</style>