Question

这是我的标记：

 <div class="col-lg-6 col-md-6">
 <h1 class="text-info">Headline One</h1><hr>
 <button>Show More</button>
 </div>

 <div class="col-lg-6 col-md-6">
 <h1 class="text-info">Headline Two</h1><hr>
 <button>Show More</button>
 </div>

 <div class="col-lg-6 col-md-6">
 <h1 class="text-info">Headline Three</h1><hr>
 <button>Show More</button>
 </div>

第一个div在左边，第二个在右边，第三个在第一个下面。现在，如果我点击第二个div中的显示更多，则第一个div和第三个div之间有很多空格。如果点击显示更多，我如何保持这些div之间的距离总是相同，如50px？如果它令人困惑，我会附上一张图片。

Answer 1

看起来你正在使用bootstrap。您需要将第一个和第三个div放在同一列中，并为它们提供自己的列来填充。

<div class="col-xs-6">
    <div class="col-xs-12">
        <h1 class="text-info">Headline One</h1>
        <hr />
        <button>Show More</button>
    </div>
    <div class="col-xs-12">
        <h1 class="text-info">Headline Two</h1>
        <hr />
        <button>Show More</button>
    </div>
</div>
<div class="col-xs-6">
    <h1 class="text-info">Headline Three</h1>
    <hr />
    <button>Show More</button>
</div>

您会注意到我也只使用了col-xs。这是因为bootstrap列类从小规模扩展。无论屏幕尺寸如何，这都将具有相同的布局。像以前一样使用col-lg-6和col-md-6是多余的。如果您希望更改每个设备尺寸的布局，请始终记住xs将适用于所有设备，并且每个较大的设备将覆盖较小的设备以适合相应的屏幕尺寸。

这是一个小提琴：https://jsfiddle.net/uqu835mc/2/

正如Jason W在下面的评论中提到的，您可以对正在进行的行使用<div class="row">...</div>来控制容器内这些列的边距和填充。这是看起来的样子：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="text-info">Headline One</h1>
                    <hr />
                    <button>Show More</button>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="text-info">Headline Two</h1>
                    <hr />
                    <button>Show More</button>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <h1 class="text-info">Headline Three</h1>
            <hr />
            <button>Show More</button>
        </div>
    </div>
</div>

以下是使用row s：https://jsfiddle.net/uqu835mc/4/

的小提琴

编辑：要将它们全部放在小屏幕上的列中，请对两个最外面的列使用<div class="col-xs-12 col-md-6">，如下所示：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-6">
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="text-info">Headline One</h1>
                    <hr />
                    <button>Show More</button>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="text-info">Headline Two</h1>
                    <hr />
                    <button>Show More</button>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6">
            <h1 class="text-info">Headline Three</h1>
            <hr />
            <button>Show More</button>
        </div>
    </div>
</div>

Answer 2

如果你把bootstrap类val sc: SparkContext放在右栏中的所有div上，那么它就可以了。这是html：

pull-right

这是一个工作小提琴：https://jsfiddle.net/kg8sh1wp/

请确保将列包装成我在示例中所做的行，否则可能会破坏其他dom元素的位置。

始终保持两个div之间相同的垂直距离

2 个答案: