CSS中的HTML colspan

Question

CSS中的HTML colspan我正在尝试构建类似于以下内容的布局：+---+---+---+|   |   |   |+---+---+---+|           |+-----------+底部填充上排空间。如果这是一个真正的表，我可以很容易地实现这一点<td colspan="3">，但由于我只是创建一个类似于表的布局，我不能使用<table>标签。这可能使用CSS吗？

Answer 1

没有简单，优雅的CSS模拟colspan。

对这个问题的搜索将返回各种解决方案，其中包括一系列替代方案，包括绝对定位，大小调整，以及类似的各种浏览器和特定情况的警告。阅读，根据您的发现做出最明智的决定。

Answer 2

据我所知，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%; }

使用这个技巧的唯一原因是为了获得table-layout行为的好处，如果仅将div和span宽度设置为某个百分比并未满足我们的设计要求，我会使用它。

但如果你不需要从这种table-layout行为中受益，那么durilai的回答就足够了。