Расчеты для отзывчивых div не работает

0

У меня обширная обертка 960px, а затем обширная обложка основного контента размером 930px с полями слева и справа 15px. внутри обложки основного содержимого есть три div, размещенные слева, каждая из которых имеет 280px, с правом 15px, чтобы заполнить основное содержимое. Чтобы не дать div справа поля и сделать его не подходящим, я дал ему другой класс и установил его margin-right равным 0.

Я пытаюсь сделать сайт отзывчивым, и это мои процентные расчеты:
обернуть = 100%
Основное content= 96,875%
поля основного содержания = 1,5625%
дивы = 30.10752688%
div margin = 1.61290323

CSS:

#page-wrap {
    width:960px; 
    margin: 0 auto; 
    background: white;
}
#main-content {
    width:96.875%;
    margin:15px 1.5625% 0 1.5625%;
}
.box { (the divs)
    float:left;
    width:30.10752688%;
    min-height:160px;
    margin:30px 1.61290323% 0 0;
}
.right{ (only the div to the right)
    margin-right:0;
}

HTML

<div id="page-wrap">
<div id="main-content">  

<div class="box">   
content
</div>

<div class="box">   
content
</div>

<div class="box right"> 
content
</div>

</div>
</div>

Я не знаю, почему divs, кажется, не изменяют размер правильно. Любая помощь приветствуется! Сайт можно посмотреть здесь: http://hl.kylmark.se

  • 0
    Пожалуйста, разместите соответствующий код для воспроизведения, спасибо
  • 0
    Получить Firebug в Firefox и поиграть с ним на лету. Я попытался изменить ширину вашего divs до 29% и смог добиться лучших результатов.
Показать ещё 5 комментариев
Теги:

1 ответ

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

Проблема, которую я вижу, заключается в том, что у всех синих ящиков есть фиксированная 10px прокладка. Так как добавление добавляется к ширине элемента, оно отбрасывает процентную математику.

Решение 1

Вы можете просто изменить боковое дополнение на эти квадраты на процентное значение, как и все остальное:

.blue {
   ...
   padding: 10px 1.0752688%;
}

При таком подходе вы будете разрушать границы по мере уменьшения, что может быть нежелательно.

Решение 2

Возможно, лучший подход заключается в изменении свойства box-sizing для вычисления ширины от границы до границы, а не от края содержимого до края содержимого. Таким образом, вы можете иметь прописку 10px внутри гибкого контейнера, ширина которого правильно определена:

.box {
   ...
   width: 32.258065%;
   box-sizing: border-box;
}

Еще кое-что

Вы также можете следить за субпиксельным округлением. Когда ваши проценты вычисляются на нечто, отличное от целого пикселя, браузер должен решить, как его округлить. Если слишком много вещей округлено, ширина будет слишком большой, и в некоторых браузерах такие скачки контента будут такими же. Вы захотите дважды проверить это в поддерживаемых браузерах. Здесь вы можете прочитать хорошее объяснение.

Поделиться
  • 0
    Это сделал это! Я знал, что мне не хватает чего-то простого! ;)

Ещё вопросы

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