Удаление поля на встроенном блоке после обертывания

Я надеюсь, что есть способ сделать это без JavaScript. У меня есть два элемента с встроенным блоком. Они имеют ширину и высоту 200 пикселей, поэтому оба они отображаются в одной строке, если размер браузера не очень мал (или с мобильными браузерами). Я хочу, чтобы между этими двумя элементами было 50px-пространство, поэтому на втором элементе я добавил "margin-left: 50px", который отлично работает. Когда размер браузера изменяется до размера, в котором оба элемента не могут вписаться в одну строку, второй элемент переносится на следующую строку, что я и хочу сделать. Проблема в том, что второй элемент по-прежнему имеет левое поле 50px, поэтому элементы не отображаются по центру. Я мог бы добавить JavaScript, чтобы определить, когда высота контейнера изменяется (т.е. Элемент, завернутый в следующую строку) и удалить левое поле, но есть ли способ выполнить это без JavaScript?

Здесь мой код, упрощенный:

<!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/

Ответы

Ответ 1

Основываясь на решении 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

Здесь другой подход к проблеме. Он использует тот факт, что пробелы отбрасываются, если они находятся в начале или конце строки. Поэтому он использует пространство для разделения блоков.

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

Вы можете сделать что-то похожее на:

@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

Рабочая демонстрация jsFiddle

Попытайтесь добавить маржу как влево, так и вправо, и к вашим обоим элементам:

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

Однако, исходя из вашего макета реального, этот трюк, возможно, не сработает или потребует больше вещей.

Ответ 6

Просто держите встроенный контейнер в встроенный div и плавайте их...

Код: -

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

Демо: - http://jsfiddle.net/YRshx/2/

Спасибо...