Эта проблема немного странная (так как мне нужно это сделать, так как я не нашел другого подходящего способа).

У меня есть три блока внутри «большого блока».

Главный div называется:

<div class="produtos-item">

И внутри этого div у меня есть еще три div

<div class="item">

Так что мне нужно?

Представьте себе магазин (электронная коммерция). У меня 3 товара (шт.).

PRODUCT-1 PRODUCT-2 PRODUCT-3
------------------------------
THIS LINE
PRODUCT-4 PRODUCT-5 PRODUCT-6

Мне нужно вставить строку между div. НО, если я установлю div .item без высоты, макет сломается. Смотрите скриншот.

enter image description here

Как видите, этот черный кружок был продуктом. Но поскольку фиксированной высоты нет, и я не могу ее установить (потому что заголовок может быть больше), макет сломается. Если я могу "вызвать" главный div (produtos-item), я могу исправить это.

Вы знаете какое-нибудь решение? :(

JSFiddle: http://jsfiddle.net/WRGba/ [отредактировано 10 мая]

css
1
starkbr 10 Май 2013 в 06:42
Если div'ы ломаются, это не должно быть из-за их высоты, это происходит из-за их ширины. возможно, когда вы используете какие-то особенности дисплея, которые портят весь их размер. см. мой пример: jsfiddle.net/Vgafb
 – 
Shebo
10 Май 2013 в 13:33
1
Кроме того, это не вопрос Wordpress, я отредактировал тег.
 – 
Shebo
10 Май 2013 в 13:36

1 ответ

Лучший ответ

Попробуйте поставить на них display:inline-block; (zoom:1;*display:inline; для совместимости с IE6, IE7)

Кроме того, jsFiddle не повредит!

Используя пример @ Shebo сверху:

Не рабочий пример: jsFiddle

Рабочий пример: jsFiddle

1
Stefan 10 Май 2013 в 13:48
Привет, Стефан В., извините за jsFiddle: jsfiddle.net/WRGba вы можете проверить PHP и CSS здесь :)
 – 
starkbr
10 Май 2013 в 21:38
Хорошо, я изменил CSS на ваше решение, но оно все еще не работает :( #produtos { width: 575px; float: left; margin: 0px 25px; } #produtos .item { width: 170px; float: left; margin-right: 10px; margin-left: 10px; display:inline-block; zoom:1; *display:inline; }
 – 
starkbr
10 Май 2013 в 21:59
1
Если у вас есть display: inline-block в вашем CSS, вы должны удалить float: left
 – 
Stefan
10 Май 2013 в 22:14