Отзывчивая одинаковая ширина

Я конвертирую адаптивный дизайн 960grid 12col в HTML. Он имеет три отдельных блока div шириной 300 пикселей каждый и ширину поля справа 20 пикселей. Вот мой код.

HTML

 <section class="container">
        <h1>Services</h1>
        <div class="box">
            box1
        </div>
        <div class="box">
            box2
        </div>
        <div class="box last">
            box3
        </div>
    </section>

CSS

.container{
      max-width: 960px;
      width: 98%;
      margin: 0 auto;
      padding: 0 1.04166666666667%;/*10px / 960px*/
 }
.box{
     width: 31.25%;/*300px / 960px*/
     margin-right: 6.66666666666667%;/*20px / 300px*/
     float: left;
     background: red;
     margin-bottom: 10px;
 }
.last{
   margin-right: 0;
}

И моя проблема в том, что div с полем имени класса не помещается внутри div-контейнера. Последний div разрывает строку и располагается ниже двух других div. Обратитесь сюда. Не знаю, где я ошибаюсь.


css responsive-design percentage media-queries fluid-layout
person Kumaresh    schedule 12.03.2013    source источник
comment
Должен ли .branding не быть .box?   -  person Billy Moat    schedule 12.03.2013

Ответы (2)


arrow_upward
2
arrow_downward

Я думаю, что проблема в вашем маргинальном праве.

Это должно быть 20, деленное на 960, что равно 0,02083333333333333333333333333333333, что в свою очередь становится 2,0833333333333333333333333333333%

В адаптивном дизайне поле рассчитывается из родительского контейнера, а не из дочернего элемента.

person Billy Moat    schedule 12.03.2013
comment
Да, ты поправляешь Билли. Я рассчитал контекст как поле, которое должно быть шириной контейнера. Спасибо проблема решена. Что нужно сделать, это - 20px/960px. То, что я сделал, это - 20px/300px. - person Kumaresh; 12.03.2013

arrow_upward
1
arrow_downward

У вас есть 3 поля шириной 31,25% и дополнительные поля 6,67% на каждом, кроме последнего. Это равняется общей ширине 107,09% и поэтому не может поместиться в ширину контейнера.

Уменьшите числа так, чтобы их сумма была меньше 100%.

Также вы должны рассчитать маржу справа, выполнив 20/960.

person JimmyRare    schedule 12.03.2013
comment
Да, но я добавил класс с именем last, который сделает последнее поле div равным 0. - person Kumaresh; 12.03.2013
comment
Да, но он все еще слишком широк. (Отредактировал ответ, чтобы вы могли видеть.) - person JimmyRare; 12.03.2013
comment
Спасибо за ваш ответ, Джимми. Я нашел ответ, упомянутый Билли. На самом деле это моя ошибка, я должен ориентироваться на ширину родительского div для полей. Но я сделал расчет с тем же div, что и маржа. В любом случае еще раз спасибо. - person Kumaresh; 12.03.2013
comment
Без проблем. Рад, что вы нашли проблему! - person JimmyRare; 12.03.2013