在换行后删除内联块元素上的边距

I'm hoping there's a way to do this without JavaScript. I have two elements displayed with inline-block. They are both 200 pixels in width and height, so they both appear on the same line unless the browser is sized very small (or with mobile browsers). I want there to be a 50px space between the two elements, so on the second element I added "margin-left: 50px", which works fine. When the browser is resized to a size where both elements cannot fit on the same line, the second element wraps to the next line, which is what I want it to do. The problem is that the second element still has the 50px left margin, so the elements don't appear centered. I could add JavaScript to detect when the container height changes (i.e. the element wrapped to the next line) and remove the left margin, but is there a way to accomplish this without JavaScript?

我希望有一种方法可以在没有JavaScript的情况下做到这一点。我有两个显示内联块的元素。它们的宽度和高度均为200像素,因此除非浏览器的尺寸非常小(或使用移动浏览器),否则它们都出现在同一行上。我希望两个元素之间有50px的空间,所以在第二个元素上我添加了“margin-left:50px”,这很好用。当浏览器的大小调整为两个元素都不能放在同一行上时,第二个元素将换行到下一行,这就是我想要它做的事情。问题是第二个元素仍然具有50px左边距,因此元素不会出现居中。我可以添加JavaScript来检测容器高度何时发生变化(即包裹到下一行的元素)并删除左边距,但有没有办法在没有JavaScript的情况下完成此操作?

Here's my code, simplified:

这是我的代码,简化:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <body>
        <div id="wrapper" style="text-align: center;">
            <div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
            <div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
        </div>
    </body>
</html>

Fiddle: http://jsfiddle.net/YRshx/

6 个解决方案

#1

Based on bastianonm's solution, try this:

基于bastianonm的解决方案,试试这个:

    <div id="wrapper" style="text-align: center; margin:0 -25px;">
        <div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
        <div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
    </div>

http://jsfiddle.net/YRshx/6/

#2

Here;s a different approach to the problem. It exploits the fact that spaces are discarded if they are at the start or end of a line. So it uses a space to separate the blocks.

这是一个解决问题的不同方法。它利用了这样一个事实:如果空格位于一行的开头或结尾,则会丢弃空格。所以它使用空格来分隔块。

Fidlle: http://jsfiddle.net/xKVG3/

<div id="wrapper">
  <div><div id="elem1"></div></div>
  <div><div id="elem2"></div></div>
</div>

#wrapper { text-align:center; }

#wrapper > div > div { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    vertical-align:top;
}

#elem1 {
    background-color: #f00;
}

#elem2 {
    background-color: #00f;
}

#wrapper > div {
    display:inline;
}

#wrapper > div:after {
    content: ' ';
    font-size:12.5em;
    line-height:0px;
}

#3

You could do something similar to:

你可以做类似的事情:

@media screen and (max-width: 453px){
    #elem2 { margin-left:0 !important; }
}

http://jsfiddle.net/YRshx/3/

#4

    <div id="wrapper" style="text-align: center;">
        <div id="elem1" style="float:left; display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
        <div id="elem2" style="float:left; display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
    </div>

#5

Working jsFiddle Demo

工作jsFiddle演示

Try to add margin to both left and right, and to your both elements:

尝试为左右两侧以及两个元素添加边距:

<div id="wrapper" style="text-align: center;">
    <div id="elem1" style="margin: 0 25px; display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
    <div id="elem2" style="margin: 0 25px; display: inline-block; background-color: #00f; width: 200px; height: 200px;"></div>
</div>

However based on your real layout, this trick maybe won't work, or need more things.

但是根据你的真实布局,这个技巧可能不起作用,或者需要更多的东西。

#6

Just keep the inline container in a inline div and float them...

只需将内联容器保留在内联div中并浮动它们......

Code:-

<div id="wrapper" style="text-align: center;">
    <div id="outer" style="display: inline-block;">
    <div id="elem1" style="float:left; background-color: #f00; width: 200px; height: 200px;"></div>
    <div id="elem2" style="float:left; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
    </div>
</div>

Demo:- http://jsfiddle.net/YRshx/2/

Thanks...

#1