如何將跨度的高度增加到不同的行？

Question

我知道標題沒有意義，但我不知道該如何表達。

看看這個：http://jsfiddle.net/nr33k/embedded/result/

我想增加以及對相匹配，對一起離開了兩口井的高度的右側的高度，所以它看起來像我有三個小口井一個大矩形。如果我試圖通過增加height:150px來顯示增加高度的方法，它會導致左邊的井底下降。我該如何解決這個問題？

Answer 1

問題是，前兩個「井」連成一排，而第三個井在另一排。

試試這個：

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

讓左邊的兩個DIV在一個單獨的DIV中，並將它左移並使右側變大在單個DIV中的div以及如果離開的話浮動......希望這對您有所幫助....

Answer 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

Answer 4

請嘗試到float:left;您的row類，然後設置跨度的高度在右側。

.row {float:left;}

這裏的工作示例http://jsfiddle.net/BUgQc/