div с размерами в пикселях, когда они не должны

Question

div с размерами в пикселях, когда они не должны

0

Учитывая такую структуру:

<div id="container">
  <div id="left-sidebar">
    <div class="item">some stuff 300px wide</div>
    <div class="item">some stuff 300px wide</div>
    <div class="item">some stuff 300px wide</div>
  </div>
</div>

И стили вроде так:

#container {
  width:1170px;
  overflow: auto;
}

#left-sidebar {
  width: 900px;
  overflow: auto;
}

.item {
  float: left;
  margin-right:30px;
  width:270px;
}

Это должно иметь 3 "элемента" по 300 пикселей каждый, но предметы обертываются на 2 элемента. Это на Firefox 25. Почему они завертываются, хотя технически они имеют точное пространство? Firebug сообщает, что все div имеют правильную ширину пикселей.

В чистом CSS и простом HTML он может работать, но это сложный сайт со многими другими элементами/стилями, хотя Firebug сообщает ширину элемента как маржа 270px + 30px и 900px.

DaveO 11 нояб. 2013, в 01:24

Источник

Теги:

html

css

2 ответа

Ещё вопросы

Sébastien · Answer 1 · 2013-11-10T21-41-00.000Z

Если вы хотите использовать float:right вы должны сначала поместить #right-sidebar в исходный код:

<div id="container">
  <div id="right-sidebar">
  some more stuff
  </div>
  <div id="left-sidebar">
    <div class="item">some stuff 300px wide</div>
    <div class="item">some stuff 300px wide</div>
    <div class="item">some stuff 300px wide</div>
  </div>
</div>

См. JSFIDDLE

На самом деле правая боковая панель не имеет никакого эффекта, и проблема существует без нее, обновили вопрос.
Извините, я не могу воспроизвести проблему в Firefox. Можете ли вы поставить свой точный код на jsfiddle.net, и я посмотрю.

DaveO · Answer 2 · 2013-11-10T22-01-00.000Z

Оказывается, это классическая проблема с пробелом между элементами. Я удалил пробел, и теперь проблема исчезла.

Я создал jsFiddle с вашим кодом, и все выглядело нормально: jsfiddle.net/audetwebdesign/wP7q8 Из-за поплавков пробел между div.item не должен быть проблемой. Если бы вы использовали inline-blocks , то ваше решение имело бы смысл. Должно быть, что-то еще происходило.