CSS две div шириной 50% в одной строке с разрывом строки в файле

Ответ 1

Проблема в том, что когда что-то встроено, каждый пробел рассматривается как фактическое пространство. Так что это повлияет на ширину элементов. Я рекомендую использовать float или display: inline-block. (Только не оставляйте пробелы между элементами).

Вот демонстрация:

div {
  background: red;
}
div + div {
  background: green;
}

<div style="width:50%; display:inline-block;">A</div><div style="width:50%; display:inline-block;">B</div>

Ответ 2

Проблема в том, что если у вас есть новая строка между ними в HTML, тогда вы получаете пространство между ними, когда используете inline-table или inline-block

50% + 50% + это пространство > 100%, и почему вторая заканчивается ниже первой

Решения:

<div></div><div></div>

или

<div>
</div><div>
</div>

или

<div></div><!--
--><div></div>

Идея состоит в том, чтобы не иметь никакого пространства между первым закрывающим тегом div и вторым тегом div открытия в вашем HTML.

PS - я бы использовал inline-block вместо inline-table для этого

Ответ 3

Дайте этот parent DIV размер шрифта: 0. Напишите вот так:

<div style="font-size:0">
  <div style="width:50%; display:inline-table;font-size:15px">A</div>
  <div style="width:50%; display:inline-table;font-size:15px">B</div>
</div>

Ответ 4

Оберните их вокруг div со следующим CSS

.div_wrapper{
    white-space: nowrap;
}

Ответ 5

Как я могу сделать что-то подобное, но без использования абсолютного положения и плавать?

Помимо использования подхода inline-block (как упоминалось в других ответах), есть несколько других подходов:

1) Таблицы CSS (FIDDLE)

.container {
  display: table;
  width: 100%;
}
.container div {
  display: table-cell;
}

<div class="container">
  <div>A</div>
  <div>B</div>
</div>

Ответ 6

<div id="wrapper" style="width: 400px">
    <div id="left" style="float: left; width: 200px;">Left</div>
    <div id="right" style="float: right; width: 200px;">Left</div>
    <div style="clear: both;"></div>
</div>

Я знаю, что этот вопрос нужен встроенному блоку, но попробуйте просмотреть http://jsfiddle.net/N9mzE/1/ в IE 7 (самый старый браузер, поддерживаемый там, где я работаю). Разделы не бок о бок.

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

Честно говоря, я вижу проблему. Поплавки фантастические.

Ответ 7

в основном inline-table для таблицы элементов, я думаю, что вам действительно нужно здесь inline-block, если вы все равно должны использовать inline-table, попробуйте его следующим образом:

<div style="width:50%; display:inline-table;">A</div><!--
--><div style="width:50%; display:inline-table;">B</div>

Ответ 8

Извините, но все ответы, которые я вижу здесь, являются либо взломанными, либо неудачными, если вы чихаете немного сложнее.

Если вы используете таблицу, вы можете (если хотите) добавить пробел между div, установить границы, padding...

<table width="100%" cellspacing="0">
    <tr>
        <td style="width:50%;">A</td>
        <td style="width:50%;">B</td>            
    </tr>
</table>

Посмотрите более полный пример здесь: http://jsfiddle.net/qPduw/5/

Ответ 9

Проблема, с которой вы сталкиваетесь при установке ширины до 50%, - это округление субпикселей. Если ширина вашего контейнера составляет, например, 99 пикселей, ширина 50% может привести к 2-мя контейнерам по 50 пикселей.

Использование float, вероятно, проще всего, и не такая плохая идея. См. этот вопрос для получения дополнительной информации о том, как исправить проблему.

Если вы не хотите использовать float, попробуйте использовать ширину 49%. Насколько мне известно, это будет работать в кросс-браузере, но не идеально подходит для пикселя.

HTML:

<div id="a">A</div>
<div id="b">B</div>

CSS

#a, #b {
    width: 49%;
    display: inline-block; 
}
#a {background-color: red;}
#b {background-color: blue;}