当一个低于另一个时，CSS在元素之间添加空间？

Question

我正在试图弄清楚如何做到这一点，基本上我有两个元素。

<div class="button">This is the first one</div>
<div class="button">This is the second one</div>

有时两者都紧挨着彼此，在这种情况下，我对他们的造型很满意。

然而，如果由于父母太狭窄导致第二个“摔倒”，我不希望这两个元素相互接触。

我的问题是为元素添加底边距也会影响情况1（当它们彼此相邻时），我不想这样做。当一个低于另一个时，如何将这两个元素分开？

Jsfiddle（尝试扩展和缩小结果框）

Answer 1

一个非常简单的解决方案是使用negative padding值，但由于这是不可能的，我们可以使用另一种简单的方法，即使它有点走动。您可以使用另一个包装元素包装容器，并为容器指定负值margin-top。

jsFiddle Demo

<强> HTML：

<div class="wrapper">
    <div class="container">
        <div class="button">This is the first button</div>
        <div class="button">This is the second button</div>
    </div>
</div>

<强> CSS：

.wrapper {
    overflow: hidden;
}
.container {
    margin-top: -10px;
}
.button {
    margin-right: 10px;
    margin-top: 10px;
}

Answer 2

这可能没什么用，但我要确保按钮只有在屏幕宽度不同的情况下才会低于对方（在这种情况下我可以通过@media查询来解决这个问题）或添加一些顶部/底部保证金，并使其他元素补充。

Answer 3

这可以通过使用媒体查询http://css-tricks.com/css-media-queries/来实现。基本上，您可以控制在视口低于或高于特定宽度时应用的规则。我已将您的代码分叉，以基于520px宽的视口添加媒体查询，但您可以根据需要进行调整。

在这里找到代码（CSS）：

.background{
    background: red;
    display: inline-block;
}
.button{
    background: orange;
    padding: 10px;
    display: inline-block;
    margin-right: 10px;
    width: 200px;
}
@media all and (max-width: 520px){
    .button{
        margin: 0 0 10px 0;
    }
    .background{
        width: 220px;
    }
}

和HTML：

<div class="background">
    <div class="button">This is the first button</div>
    <div class="button">This is the second button</div>
</div>

分叉小提琴可以在这里找到：http://jsfiddle.net/vsYpe/1/

希望这有帮助!!!

Answer 4

我不确定是否有更好的方法来使用CSS，但如果没有其他工作，第一个元素下面的隐形元素可以工作？我不确定你的情况如何，但如果你给我们更多的细节，可能还有其他选择。