在表的顶部创建子列

Question

我想知道如何使用CSS / HTML来划分表格的第一行，如下所示：

我知道如果我希望它们位于底部，我可以使用类似的东西：

.subcol{
width: 180 px;
}

要做到这一点，但我似乎无法找到任何方法使子列显示在顶部，而不是底部。现在我正试图用这个：

.col1{
float: left;
width: 795px;
padding-right:15px;

}

.col2{
float: left;
width: 320px;
}

然后，我使用DIV将它放在一起：

<div class="col1">VIDEO></div>
<div class="col2">TEXT BOX</div>

对此有何建议？

Answer 1

恰恰相反：你创建一个跨越2列的单元格，而不是将单元格分成两列。它由 colspan 属性构成（与rowspan垂直相同）。

请参阅小提琴：http://jsfiddle.net/PhilippeVay/nFGYq/

重要说明：为什么您首先使用表格布局？你永远不应该这样做。使用div或其他元素并使用CSS设置样式。

<强> HTML

<table>
    <tr>
        <td>Video</td>
        <td>Small text box</td>
    </tr>
    <tr>
        <td colspan="2">Text and pictures</td>
    </tr>
</table>

<强> CSS

table {
    table-layout: fixed; /* will force browsers to stick to widths you want, not adapt to the content of various cells as usual */
    width: 400px;
}
tr:first-child td {
    width: 120px; /* 120 + 40 + 40 = 200 */
}
td {
    border: 1px solid grey;
    padding: 40px;
}

Answer 2

你可以使用表

<table>
<tr>
<td>video</td>
<td>small text box</td>
</tr>
<tr>
<td colspan=2>text and picture</td>
</tr>
</table>

希望这会有所帮助

Answer 3

如果您将该区域划分为div，则只需更改它们在HTML中的顺序 - 您可以将其放置在顶部的两个区域，然后在它们下面放置一个清除div，以便文本和图片显示在两个下面（并清除浮动）。