Подайте, пожалуйста идею как можно убрать расстояние между блоками? Чтобы третий блок примыкал к первому. Из-за свойств float 3-й начинается после второго. И не могу придумать как сделать, чтобы он был выше.
-
Если найденное решение отличается от ответов других участников, опубликуйте его в ответе к вашему вопросу. Уверен, оно в будущем поможет многим вашим коллегам.– Nicolas Chabanovsky17 ноя 2015 в 10:18
Добавить комментарий
|
3 ответа
Данная проблема оказалась не связана с CSS. В файле list.phtml нужно было поменять 3 и 4 блоки местами и всё стало на места.
Нужно добавить два div-а. Левый и правый. А уже в них размещать блоки block.
CSS
div.left {float:left; width:300px; overflow:hidden}
div.right {float:left; width:300px; overflow:hidden}
div.block1 {float:left; width:300px; height:100px; background-color:#f00}
div.block2 {float:left; width:300px; height:200px; background-color:#00f}
div.block3 {float:left; width:300px; height:200px; background-color:#0f0}
div.block4 {float:left; width:300px; height:100px; background-color:#000}
HTML
<div class="left">
<div class="block1">
</div>
<div class="block3">
</div>
</div>
<div class="right">
<div class="block2">
</div>
<div class="block4">
</div>
</div>
-
К сожалению этого не сделать так как блоки из разных модулей и пока не представляю возможно ли их разделить в два дива, так как общего хмл файла нет...– Sylon17 ноя 2015 в 3:56
Свойство float не влияет на разрыв между 1 и 3 блоком. Какие-то другие свойства установлены?
-
Интересно получается, дело в том, что у меня так же всё поставлено, единственно есть margin-bottom: 5px. Но это не влияет на такой большой разрыв, там именно связь, что третий блок пляшет от того где заканчивается низ второго. Возможно дело в том, что в вашем примере указаны высоты, а у меня блоки как-бы резиновые. agestor.com/pharmacy/capsules.html?mode=list– Sylon17 ноя 2015 в 3:25
-
Указанная высота в данном случае не имеет значения. Можно заполнить Block2 текстом, чтобы его высота стала больше, чем у Block3. Результат будет тот же.– gt81417 ноя 2015 в 4:21
-
Посмотрите, пожалуйста, ссылку выше, там видно, что все css стоят эдентичные (единственно есть ещё margin, но они дают всего несколько пикселей), но при этом всё рвыно образуется отстут...– Sylon17 ноя 2015 в 8:28
-
-
А вы смотрели тот товар где старая зачёркнутая цена и новая? Там блок №2 стал выше и появился разрыв.– Sylon17 ноя 2015 в 9:21