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

如果您必须处理动态内容，它会变得更加困难。我想你最终需要通过将背景颜色应用于容器元素并隐藏你不想看到的位来伪造它。