0

我正在尝试将表格视图转换为浮动视图。它有两列，第一列应该有一行，第二列应该有两行。我希望第一列的行伸展，使其跨越第二列的两行。

目前我的 HTML 是这样的：

<div class="row">
<div class="span1" style="background-color: #FF0000">
    First column with single row goes here
</div>
<div class="span11">
    <div class="row">
        <div class="span12" style="background-color: #00FF00"> 
            First row of second column goes here
        </div>
    </div>
    <div class="row">
        <div class="span12" style="background-color: #0000FF">
            Second row of second column goes here
        </div>
    </div>
</div>

现在我有一个问题：单行列不跨越第二列的两行。它与第一行具有相同的高度，并且在其下方具有与第二行相同的高度的空白。

我应该如何在两行上拉伸这个单元格？

4

2 回答 2

1

我认为您正在以错误的方式思考这个问题，使用表/行的概念应用于 div 容器。他们真的不是那样工作的。

你可以用 CSS 做到这一点。

添加浮动：左；到所有 div 容器或类。

在“第 2 列”中添加margin-left:100px;您想要的样式。这会将它们推离第一列。

添加height:100px;到您的左列 div 以使其具有固定高度。

你可以这样拨通所有这些。

此外，您可能错误地使用了“行”类，因为它包裹了整个组，但它也是应用于第二行的类。你可能想做这些不同的东西。

于 2013-02-22T09:23:06.463 回答
0

我认为这会如你所愿：

<div style="background-color: #FF0000">
  First column with single row goes here
</div>
<div style="background-color: #00FF00; width:50%; float:left;"> 
  First row of second column goes here
</div>
<div style="background-color: #0000FF; width:50%; float:left;">
  Second row of second column goes here
</div>

我不知道您的 CSS 类中有什么代码，所以我在回答中删除了它们。您可能必须修改该代码才能使其正常工作。

我将列的宽度设置为 50%。如果您想要其他宽度，请更改这些值。只需确保总和为 100。

我还删除了一些我认为不需要的 HTML 代码。至少据我了解你的问题。

于 2013-02-22T09:33:25.040 回答