Выравнивание отзывчивых дивов

0

Я пишу отзывчивый дизайн для веб-сайта, и у меня есть 4 отдельных div, которые должны быть расположены 2 TOP x 2 BOTTOM. При некоторых разрешениях это работает нормально, но у других есть отверстие между верхним левым div и нижним левым. Вот как это должно выглядеть: http://postimg.org/image/76q5y5w5v/

Вот как это выглядит при неправильном предоставлении: http://postimg.org/image/6a4f8x4j7/

Если вы хотите увидеть все применяемые CSS, просто зайдите на сайт http://bbogdanov.us/ (внизу страницы) и попробуйте сыграть с размером браузера, чтобы отслеживать поведение div в разных размерах.

Теги:
website
responsive-design
design

3 ответа

1
Лучший ответ

Причина, по которой это происходит, состоит в том, что элементы div размещаются. Когда вы уменьшаете размер экрана, блок становится длиннее (выше), а поплавок ломается. Вы можете очистить каждую другую строку, добавив этот фрагмент:

.uslugihome2:nth-child(odd) {
    clear: left;
}

Однако, предостережение, вы должны использовать polyfill для работы в старых браузерах, потому что некоторые псевдоклассы, такие как nth-child, не поддерживаются. Я рекомендую Selectivizr.

0

Это потому, что высота этих 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>
0

В настоящее время у вас есть следующая разметка для каждого окна:

<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. Надеюсь, что это поможет

Ещё вопросы

Сообщество Overcoder
Наверх
Меню