Два встроенных блока, ширина 50% элементов переносится на вторую строку

Я хотел бы иметь два столбца с шириной 50% и избегать поплавков. Поэтому я подумал, используя display:inline-block.

Когда элементы добавляют к ширине 99% (например, 50%, 49%, http://jsfiddle.net/XCDsu/2/), она работает как ожидалось.

При использовании 100% -ной ширины (например, 50%, 50%, http://jsfiddle.net/XCDsu/3/) второй столбец разбивается на вторую строку.

Почему это?

Ответ 1

Это потому, что display:inline-block учитывает пробел в html. Если вы удаляете пробел между div, он работает так, как ожидалось. Живой пример: http://jsfiddle.net/XCDsu/4/

<div id="col1">content</div><div id="col2">content</div>

Ответ 2

Вы можете удалить пробелы с помощью css, используя белое пространство, чтобы вы могли сохранить свой красивый HTML-макет. Не забудьте снова вернуть белое пространство в нормальное состояние, если вы хотите, чтобы текст был заключен внутри столбцов.

Протестировано в IE9, Chrome 18, FF 12

.container { white-space: nowrap; }
.column { display: inline-block; width: 50%; white-space: normal; }

<div class="container">
  <div class="column">text that can wrap</div>
  <div class="column">text that can wrap</div>
</div>

Ответ 3

ПРИМЕЧАНИЕ. В 2016 году вы, вероятно, сможете использовать flexbox чтобы решить эту проблему проще.

Этот метод работает корректно IE7+ и во всех основных браузерах, он был опробован и протестирован в ряде сложных веб-приложений области просмотра -based.

<style>
    .container {
        font-size: 0;
    }

    .ie7 .column {
        font-size: 16px; 
        display: inline; 
        zoom: 1;
    }

    .ie8 .column {
        font-size:16px;
    }

    .ie9_and_newer .column { 
        display: inline-block; 
        width: 50%; 
        font-size: 1rem;
    }
</style>

<div class="container">
    <div class="column">text that can wrap</div>
    <div class="column">text that can wrap</div>
</div>

Демоверсия в реальном времени: http://output.jsbin.com/sekeco/2

Единственным недостатком этого метода для IE7/8 является использование body {font-size:??px} качестве основы для определения размера шрифта em/% -based.

IE7/IE8 специфический CSS может быть обслужен с помощью IE Условные комментарии

Ответ 4

Элементы

inline и inline-block зависят от пробелов в HTML.

Самый простой способ исправить вашу проблему - удалить пробелы между </div> и <div id="col2">, см. http://jsfiddle.net/XCDsu/15/

Существуют и другие возможные решения: альтернатива свойствам CSS3 для bikeshedding?

Ответ 5

Я продолжал иметь эту проблему в ie7, когда браузер находился на определенной ширине. Выключает старые браузеры вокруг значения пикселя, если процентный результат не является целым числом. Чтобы решить эту проблему, вы можете попробовать установить

overflow: hidden;

для последнего элемента (или всех из них).