Question

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

目前我的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>

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

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

Answer 1

我认为你正在考虑这个错误的方法，使用表/行的概念来应用于div容器。他们并没有真正那样工作。

你可以用CSS做到这一点。

添加浮动：左;到你所有的div容器或类。

将margin-left:100px;添加到“第2列”中所需的样式中。这将使他们远离第一列。

将height:100px;添加到左栏div以获得固定高度。

你可以像这样拨打所有这些。

此外，您可能错误地使用了类'row'，因为它包裹整个组，但它也是应用于第2行的类。你可能想要做出这些不同的事情。

Answer 2

我认为这会按你的意愿运作：

<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代码。至少就我理解你的问题而言。

Bootstrap：如何用浮动元素制作“rowspan”？

2 个答案: