1

Подайте, пожалуйста идею как можно убрать расстояние между блоками? Чтобы третий блок примыкал к первому. Из-за свойств float 3-й начинается после второго. И не могу придумать как сделать, чтобы он был выше.введите сюда описание изображения

введите сюда описание изображения

1
  • Если найденное решение отличается от ответов других участников, опубликуйте его в ответе к вашему вопросу. Уверен, оно в будущем поможет многим вашим коллегам. 17 ноя 2015 в 10:18

3 ответа 3

1

Данная проблема оказалась не связана с CSS. В файле list.phtml нужно было поменять 3 и 4 блоки местами и всё стало на места.

0

Нужно добавить два 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>
1
  • К сожалению этого не сделать так как блоки из разных модулей и пока не представляю возможно ли их разделить в два дива, так как общего хмл файла нет...
    – Sylon
    17 ноя 2015 в 3:56
0

Свойство float не влияет на разрыв между 1 и 3 блоком. Какие-то другие свойства установлены?

Вот скриншот результата работы аналогичного кода: Пример работы свойства

9
  • Интересно получается, дело в том, что у меня так же всё поставлено, единственно есть margin-bottom: 5px. Но это не влияет на такой большой разрыв, там именно связь, что третий блок пляшет от того где заканчивается низ второго. Возможно дело в том, что в вашем примере указаны высоты, а у меня блоки как-бы резиновые. agestor.com/pharmacy/capsules.html?mode=list
    – Sylon
    17 ноя 2015 в 3:25
  • Указанная высота в данном случае не имеет значения. Можно заполнить Block2 текстом, чтобы его высота стала больше, чем у Block3. Результат будет тот же.
    – gt814
    17 ноя 2015 в 4:21
  • Посмотрите, пожалуйста, ссылку выше, там видно, что все css стоят эдентичные (единственно есть ещё margin, но они дают всего несколько пикселей), но при этом всё рвыно образуется отстут...
    – Sylon
    17 ноя 2015 в 8:28
  • По ссылке, которую вы привели, такой ситуации нет.
    – gt814
    17 ноя 2015 в 9:19
  • А вы смотрели тот товар где старая зачёркнутая цена и новая? Там блок №2 стал выше и появился разрыв.
    – Sylon
    17 ноя 2015 в 9:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.