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

我想弄清楚如何做到这一点，基本上我有两个元素。当一个元素低于另一个元素时，CSS会在元素之间添加空间？

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

有时两者都彼此相邻，在这种情况下，我确定他们的造型。

enter image description here

但是，如果第二个“倒下”由于父母过于狭隘，我不希望两个元素互相接触。

enter image description here

我的问题是，加入底边距的元素也将影响情况1（当它们彼此相邻），我不想做的事。当一个在另一个之下时，我怎样才能将这两个元素分开？

Jsfiddle（试行扩缩的结果框）

来源

2013-09-25 lisovaccaro

一个非常简单的解决方案将使用negative padding值，但由于这是不可能的，我们可以使用另一种简单的方法，即使它有点散步。您可以用另一个包装元素包装容器，并为该容器提供负值0值。

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

来源

2013-09-25 21:23:51 Itay

1+一个很好的解决方案。在*框外思考的好方法* –

这可能没有太大的帮助，但我想无论是确保该按钮只有跌破彼此在不同的屏幕宽度的情况下（在这种情况下，我可以通过@media查询来解决这个问题），或者添加一些顶部/底部边距，并使其他元素进行补充。

来源

2013-09-25 21:20:06

我可能会迫使它们落，加入300像素一个最小宽度低于600px的......这是不是一个坏主意。如果没有其他出来，我会采取这个想法 – lisovaccaro

这可以通过使用媒体查询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/

希望这有助于！

来源

2013-09-25 21:23:07 NullHappens

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

来源

2013-09-25 21:23:37 neonKow

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

回答

相关问题