Question

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

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

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

Answer 1

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

.row {float:left;}

这是一个工作样本http://jsfiddle.net/BUgQc/

Answer 2

在左侧将两个DIV放在一个单独的DIV中并向左漂浮并使右侧更大，在单个DIV中使用div并且如果离开则浮动....希望这对您有所帮助....

Answer 3

问题是前两个''井'是连续的，而第三个是另一排。

试试这个：

<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>

Answer 4

检查此示例。希望它有所帮助

<强> 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 个答案: