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&nbsp;class="table"> &nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="cell&nbsp;red&nbsp;first"></span> &nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="cell&nbsp;blue&nbsp;fill"></span> &nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="cell&nbsp;green&nbsp;last"></span> &nbsp;&nbsp;</div></div><div&nbsp;class="table"> &nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="cell&nbsp;black"></span> &nbsp;&nbsp;</div></div>这将是css：&nbsp;&nbsp;/*&nbsp;this&nbsp;is&nbsp;to&nbsp;reproduce&nbsp;table-like&nbsp;structure &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;the&nbsp;sake&nbsp;of&nbsp;table-less&nbsp;layout.&nbsp;*/ &nbsp;&nbsp;.table&nbsp;{&nbsp;display:table;&nbsp;table-layout:fixed;&nbsp;width:100px;&nbsp;} &nbsp;&nbsp;.row&nbsp;{&nbsp;display:table-row;&nbsp;height:10px;&nbsp;} &nbsp;&nbsp;.cell&nbsp;{&nbsp;display:table-cell;&nbsp;} &nbsp;&nbsp;/*&nbsp;this&nbsp;is&nbsp;where&nbsp;the&nbsp;colspan&nbsp;tricks&nbsp;works.&nbsp;*/ &nbsp;&nbsp;span&nbsp;{&nbsp;width:100%;&nbsp;} &nbsp;&nbsp;/*&nbsp;below&nbsp;is&nbsp;for&nbsp;visual&nbsp;recognition&nbsp;test&nbsp;purposes&nbsp;only.&nbsp;*/ &nbsp;&nbsp;.red&nbsp;{&nbsp;background:red;&nbsp;} &nbsp;&nbsp;.blue&nbsp;{&nbsp;background:blue;&nbsp;} &nbsp;&nbsp;.green&nbsp;{&nbsp;background:green;&nbsp;} &nbsp;&nbsp;.black&nbsp;{&nbsp;background:black;&nbsp;} &nbsp;&nbsp;/*&nbsp;this&nbsp;is&nbsp;the&nbsp;benefit&nbsp;of&nbsp;using&nbsp;table&nbsp;display,&nbsp;it&nbsp;is&nbsp;able&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to&nbsp;set&nbsp;the&nbsp;width&nbsp;of&nbsp;it's&nbsp;child&nbsp;object&nbsp;to&nbsp;fill&nbsp;the&nbsp;rest&nbsp;of&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the&nbsp;parent&nbsp;width&nbsp;as&nbsp;in&nbsp;table&nbsp;*/ &nbsp;&nbsp;.first&nbsp;{&nbsp;width:&nbsp;20px;&nbsp;} &nbsp;&nbsp;.last&nbsp;{&nbsp;width:&nbsp;30px;&nbsp;} &nbsp;&nbsp;.fill&nbsp;{&nbsp;width:&nbsp;100%;&nbsp;}使用这个技巧的唯一原因是为了获得table-layout行为的好处，如果仅将div和span宽度设置为某个百分比并未满足我们的设计要求，我会使用它。但如果你不需要从这种table-layout行为中受益，那么durilai的回答就足够了。