如何将跨度的高度增加到不同的行？答案

【问题标题】：How can I increase the height of a span to a different row?如何将跨度的高度增加到不同的行？
【发布时间】：2012-11-20 22:20:33
【问题描述】：

我知道标题没有意义，但我不知道该怎么说。

看看这个：http://jsfiddle.net/nr33k/embedded/result/

我想增加右侧井的高度以匹配左侧两个井的高度，所以看起来我在一个大矩形中有三个小井。如果我尝试通过添加height:150px 以明显的方式增加高度，它会导致左侧的底部井落下。我该如何解决？

【问题讨论】：

标签： html css twitter-bootstrap height

【解决方案1】：

在一个 DIV 中制作左侧两个 DIV 并将其向左浮动，并使右侧更大 Well div 在一个 DIV 中，如果左侧则浮动....希望这对您有所帮助....

【讨论】：

【解决方案2】：

问题是前两个“井”在一行中，而第三个在另一行中。

试试这个：

<div class="row">
  <div class="span4">
    <div class="well well-small" style="height:50px">
      <p>hello</p>
    </div>
    <div class="well well-small" style="height:100px">
      <p>hello again</p>
    </div>
  </div>
  <div class="span8">
    <div class="well well-small" style="height:190px;">
      <p>hello one more time</p>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

检查这个例子。希望对你有帮助

HTML

<div id="container2">        
    <div id="container1">
        <div id="col1" style="height:250px">
            <!-- Column one start -->
            <h2>Equal height columns</h2>           
            <!-- Column one end -->
        </div>

        <div id="col2">
            <!-- Column two start -->            
            <h3>Mac</h3>           
            <!-- Column two end -->
        </div>            
    </div>
</div>

CSS

#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}

DEMO

Source link

【讨论】：

【解决方案4】：

请尝试float:left;你的row类，然后在右侧设置跨度的高度。

.row {float:left;}

这是一个工作示例http://jsfiddle.net/BUgQc/

【讨论】：