Question

我是css / html和bootstrap本身的新手。我遇到了两个问题。

一个是：我想将第3和第4个盒子的高度修改为100％，但是没有什么div，或者我将它改为100％它没有任何变化。

第二：我如何让Box4进入box2，所以它不与box3一致？

这是我想要的照片：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;
}

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

jumbotron高度和浮动

1 个答案: