Как поместить div один рядом с другим без плавающего?

Question

Как поместить div один рядом с другим без плавающего?

0

Мне удалось разместить два divs один рядом с другим, используя float: left, но нижний div не отображается должным образом: http://jsfiddle.net/N4kE3/2/

И с этим css для каждого div:

display: inline-block;
width: 50%;

см.: http://jsfiddle.net/N4kE3/3/

Они один над другим. Я должен установить width: 49% чтобы они были рядом друг с другом.

Как это возможно?

Elfayer 13 апр. 2014, в 15:28

Источник

0

Возможный дубликат Как удалить видимость пробелов между встроенными элементами?
Paulie_D 13 апр. 2014, в 13:29
0

Если у вас есть какие-либо отступы, к ним применяется граница, тогда ширина не та, которую вы думаете.
Jai 13 апр. 2014, в 13:30

Теги:

html

css

2 ответа

1

Отображается пробел между элементами. Представьте Hello world. Это отображается как " Hello world". См. Пробел между Hello и World.

Ввод и несколько пробелов сворачиваются в одно пространство.

  <strong>Hello</strong>
  <em>world</em>

становится " Hello world".

То же самое происходит с вашими div. Они составляют 50% экрана, но пространство также занимает 10 пикселей, толкает второй div на следующую строку.

Существует несколько способов решения этого. Используя float, используйте display: table-cell или (как я обычно предпочитаю), исключив пространство между divs с помощью комментариев XML .

<div id="content">
    <div id="action">
        <div id="buy" class="action">Buy</div><!--
     --><div id="sell" class="action">Sell</div>
    </div>
    <div id="other">test</div>
</div>

Смотрите скрипку

Jasny - Arnold Daniels 13 апр. 2014, в 11:49

0

Разве мы не можем использовать  в этом случае?
Elfayer 15 апр. 2014, в 07:40

Ещё вопросы

Возможный дубликат Как удалить видимость пробелов между встроенными элементами?
Если у вас есть какие-либо отступы, к ним применяется граница, тогда ширина не та, которую вы думаете.
Разве мы не можем использовать  в этом случае?

Turnip · Accepted Answer · 2014-04-13T11-27-00.000Z

Если вы хотите сохранить свои поплавки, вы можете использовать clearfix в контейнере:

Working demo

#action:after {
    content: "";
    display: table;
    clear: both;
}

Если вы хотите использовать inline-block вам нужно удалить пробел в вашей разметке:

Working demo

Эта..

    <div id="action">
        <div id="buy" class="action">Buy</div>
        <div id="sell" class="action">Sell</div>
    </div>

Становится...

<div id="action">
    <div id="buy" class="action">Buy</div><div id="sell" class="action">Sell</div>
</div>

.. в противном случае пробел будет учитываться при расчете ширины, составляющей 50% + 50% + пробелы = более 100%. Вот как работает inline-block.