jumbotron高度和浮動

Question

即時通訊類的新/ css/html和引導本身。我遇到了兩個問題。

其中之一是：我想將第三和第四個盒子的高度固定爲100％，但是無論哪個div或班級變爲100％，都不做任何更改。

第二：如何讓Box4在box2下走，所以它不與box3內聯？

鏈接描述問題：http://jsfiddle.net/BXZrX/6/

這裏是我想要的圖片：http://oi62.tinypic.com/osqule.jpg

<div id="content"> 
    <div class="jumbotron"> 
     <div class="container-fluid"> 
      <h1>Join now!</h1> 
      <p>To get full use of the website, register now!.</p> 
      <a href="#" class="btn btn-primary btn-lg" role="button">Sign up</a> 
     </div> 
    </div> 
    <div class="bordertop"> 
     <div class="jumbotron"> 
      <div class="container-fluid"> 
       <h1>Box2</h1> 
       <p>text</p> 
      </div> 
     </div> 
    </div> 
    <div class="box3"> 
     <div class="jumbotron"> 
      <div class="container-fluid"> 
       <h1>Box3</h1> 
       <p>text</p> 
      </div> 
     </div> 
    </div> 
    <div class="box4"> 
     <div class="jumbotron"> 
      <div class="container-fluid"> 
       <h1>Box4</h1> 
       <p>text</p> 
      </div> 
     </div> 
    </div> 
     </div> 
#content > div { 
float:left; 
width:49%; 
} 
#content > div.bordertop { 
    float:right; 
    width:49%; 
} 
#content > div.box3 { 
    clear:both; 
    width:49%; 
    float:left; 
} 
#content > div.box4 { 
    float:right; 
    width:49%; 
} 

Answer 1

這裏是一個開始： http://jsfiddle.net/jPZLd/11/

我換箱2和3以便它們正確地向下流過頁面：

<div id="content"> 
    <div class="column"> 
     <div class="jumbotron"> 
      <div class="container-fluid"> 
       <h1>Join now!</h1> 
       <p>To get full use of the website, register now!.</p> 
       <a href="#" class="btn btn-primary btn-lg" role="button">Sign up</a> 
      </div> 
     </div> 
     <div class="bordertop"> 
      <div class="jumbotron"> 
       <div class="container-fluid"> 
        <h1>Box2</h1> 
        <p>text</p> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="column"> 
     <div class="box3"> 
      <div class="jumbotron"> 
       <div class="container-fluid"> 
        <h1>Box3</h1> 
        <p>text</p> 
       </div> 
      </div> 
     </div> 
     <div class="box4"> 
      <div class="jumbotron"> 
       <div class="container-fluid"> 
        <h1>Box4</h1> 
        <p>text</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div id="footer"> 
    Footer 

     </div> 

如果您需要方框2和方框4具有相同的基線，那麼如果您的內容是靜態的，則很容易 - 只需手動調整較短方框的高度，例如。

.box4 .jumbotron { 
    height: 319px; 
} 

如果您必須處理動態內容，它會變得更加困難。我想你最終需要通過將背景顏色應用於容器元素並隱藏你不想看到的位來僞造它。