Question

我试图让我的div在某种意义上“流畅”。例：我有三个div，每个都有一个类：<div col-12-xs col-6-md>

这意味着在大中型屏幕上，一个和两个将并排，而div 3将在它们之下。

    <div class="container">   
        <div class="row">
            <div class="col-sm-6 box">One</div>
            <div class="col-sm-6 box">
                Two
                <br>
                Two
                <br>
                Two
            </div>
            <div class="col-sm-6 box">Three</div>
        </div>
    </div>

因此，如果使用此示例代码，您显然会推动第三个div，而div会随着更多内容的增加而增加高度。

我的问题是这个。是否有一种方法可以让差异三保持在div 1之下，因为div 2在高度上增长但是当屏幕较小时，div 2仍然应该在div 1之下和dif 3之上移动。

Example of the problem 正如你在图片中看到的那样，我希望div div下面有div 3，即使div 2在高度上增长但是在一个小屏幕上div div应该在div 1和div之间移动。

这可以通过bootstrap完成吗？

Answer 1

将第二个div设为float:right。我在使用pull-right

时添加了bootstrap类

这是我的小提琴https://jsfiddle.net/ze4g18a7/

        div {
            text-align:center;
            font-size:20px;
        }

        .div1 {
            height: 200px;
            background-color: #ffe6ff;
        }

        .div2 {
            height: 400px;
            background-color: #ccfff5;
        }

        .div3 {
            height: 200px;
            background-color: #80dfff;
        }

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row">
        <div class="div1 col-xs-12 col-sm-6 col-md-6 col-lg-6">1</div>
        <div class="div2 col-xs-12 col-sm-6 col-md-6 col-lg-6 pull-right">2</div>
        <div class="div3 col-xs-12 col-sm-6 col-md-6 col-lg-6">3</div>
    </div>

Answer 2

你可以在前两个div之后添加一个clearfix，如下所示：

<div class="container">   
    <div class="row">
        <div class="col-sm-6 box">One</div>
        <div class="col-sm-6 box">
            Two
            <br>
            Two
            <br>
            Two
        </div>
        <div class="clearfix col-xs-12></div>
        <div class="col-sm-6 box">Three</div>
    </div>
</div>

这将导致第三个div始终低于前两个

无法使引导列“流畅”

2 个答案: