Я пишу отзывчивый дизайн для веб-сайта, и у меня есть 4 отдельных div, которые должны быть расположены 2 TOP x 2 BOTTOM. При некоторых разрешениях это работает нормально, но у других есть отверстие между верхним левым div и нижним левым. Вот как это должно выглядеть: http://postimg.org/image/76q5y5w5v/
Вот как это выглядит при неправильном предоставлении: http://postimg.org/image/6a4f8x4j7/
Если вы хотите увидеть все применяемые CSS, просто зайдите на сайт http://bbogdanov.us/ (внизу страницы) и попробуйте сыграть с размером браузера, чтобы отслеживать поведение div в разных размерах.
Причина, по которой это происходит, состоит в том, что элементы div
размещаются. Когда вы уменьшаете размер экрана, блок становится длиннее (выше), а поплавок ломается. Вы можете очистить каждую другую строку, добавив этот фрагмент:
.uslugihome2:nth-child(odd) {
clear: left;
}
Однако, предостережение, вы должны использовать polyfill для работы в старых браузерах, потому что некоторые псевдоклассы, такие как nth-child, не поддерживаются. Я рекомендую Selectivizr.
Это потому, что высота этих divs изменяется по мере изменения ширины окна. Попробуйте обернуть div вокруг каждых двух отдельных div. Позвольте назвать эту строку.
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
В настоящее время у вас есть следующая разметка для каждого окна:
<div class="uslugihome2">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
Причина, по которой вы видите разрыв, связана с шириной и разницей, установленными на uslugihome2
.
Итак, что бы я хотел, создаем еще один div, который обертывает дочерние divs следующим образом:
<div class="uslugihome2">
<div class="uslugi_wrapper">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
</div>
Затем перейдите к строке 316 стиля.css и удалите margin: 2.5%;
, затем измените ширину на 50%
.
После этого добавьте в файл css следующее:
.uslugi_wrapper {
padding: 0 15px;
}
Не уверен, какой браузер вы хотите поддерживать, но это также обеспечит поддержку подобных IE8. Надеюсь, что это поможет