Адаптивный макет управления процентами

Question

Адаптивный макет управления процентами

0

Я пытаюсь сделать свой собственный отзывчивый макет, используя проценты. Мне удалось вычислить столбцы, которые я хотел использовать, но я не могу понять, как помещать как маржу (желоба) между столбцами. Если вы проверите код кодекса, между содержимым не будет интервала.

Codepen

   .container{
    width: 90%;
    max-width: 1140px;
    margin: 0 auto;
    /*background: #333;*/
}


 .container .columns{
    float: left;
    background: #ccc;
    margin: 0 0 1em ;
    padding-right: 1em;
    padding-left: 1em;
    border-left-width:12px;
    }

    .row{
        float: left;
        clear: both;
        width: 100%;
    }

    .container .columns.col-1 { width: 8.33333333333%; }
    .container .columns.col-2 { width: 16.6666666667%; }
    .container .columns.col-3 { width: 25%;   }
    .container .columns.col-4 { width: 33.3333333333%; }
    .container .columns.col-5 { width: 41.6666666667%; }
    .container .columns.col-6 { width: 50%;   }
    .container .columns.col-7 { width: 58.3333333333%; }
    .container .columns.col-8 { width: 66.6666666667%; }
    .container .columns.col-9 { width: 75%;   }
    .container .columns.col-10{ width: 83.3333333333%; }
    .container .columns.col-11{ width: 91.6666666667%; }
    .container .columns.col-12{ width: 100%;  }

nCore 16 май 2014, в 03:18

Источник

Теги:

html

css

html5

grid

responsive-design

4 ответа

Ещё вопросы

Ian · Answer 1 · 2014-05-15T22-47-00.000Z

Я лично уклоняюсь от Calc, поскольку он все еще не полностью поддерживается, но до вас - http://caniuse.com/#feat=calc

Я бы рекомендовал обернуть весь ваш контент в другой набор элементов таким образом, чтобы вы могли использовать отступы для интервала и поля для выравнивания. Проверьте демоверсию.

<div class="columns col-6"><div>6</div></div>

DEMO

Ооо, я не знал об ограничении calc, я думал, что оно будет поддерживаться старыми браузерами.
Да, это действительно крутая концепция, но в реальном мире большинству людей нужна поддержка ie8, как бы это ни было печально. Вы можете заполнить его, вернувшись к вычислениям с JQuery, но это немного грязно и не нужно.
Если это ответ, который вы искали, не могли бы вы пометить его как исправленный? Или, если вы ищете что-то еще, пожалуйста, подробно. Спасибо!

Narayana · Answer 2 · 2014-05-15T23-37-00.000Z

Вместо того, чтобы давать отступы, дайте разницу

.container .columns{
float: left;
background: #ccc;
margin: 0 0 1em ;
margin-right: 1em;
margin-left: 1em;
border-left-width:12px;
}

Я попробовал это, и это разбивает столбцы.

Mohammad Hamza · Answer 3 · 2014-05-15T22-43-00.000Z

0

Используйте метод calc() для вычисления поля по ширине. Например, для .col-3 CSS будет

.container .columns.col-3 { 
width: calc(25% - 5px);
margin-right:5px;
}

убедитесь, что вы используете calc() в правильном порядке, как это

calc([first value][space][operator][space][second value])

Mohammad Hamza 15 май 2014, в 22:43

0

Я только попробовал это и все еще ломаю колонки все же. Я попытался уменьшить ширину столбцов, но я не думаю, что это лучшая практика. пожалуйста, используйте код, указанный выше, чтобы попробовать любые предложенные методы
nCore 16 май 2014, в 01:19
0

@nCore Это решение кажется хорошим, просто равномерно распределите поля справа и слева, чтобы выровнять его по центру. Взгляните на этот codepen.io/anon/pen/IGLnz
reuelab 16 май 2014, в 01:21
0

@ Мохаммад Хамза и Фрайент Круто, возможно я сам проверил это неправильно. Мои извинения пытались найти решение и были расстроены. Благодарю.
nCore 16 май 2014, в 01:26
0

Во-вторых, вы также можете использовать% для маржи. .col-3 width и margin оба будут установлены в%. Это .col-3{width:23%;margin:0 1%;}
Mohammad Hamza 16 май 2014, в 01:27
0

nCore, не могли бы вы описать, что вы на самом деле хотите. Вы хотите создать поле между этими столбцами?
Mohammad Hamza 16 май 2014, в 01:29
0

Ну, ваш метод уже работает, я только хотел, чтобы поле было между столбцами, чтобы я мог ясно видеть каждый раздел. И, как и в RWD-фреймворках, у них также есть этот запас (я думаю, что они называют его желобом). В основном просто пытаюсь повторить это.
nCore 16 май 2014, в 01:38

Показать ещё 4 комментария

mohamedrias · Answer 4 · 2014-05-15T22-41-00.000Z

Если вы видите ширину столбцов, вы равномерно разделили 100% ширины окна просмотра.

Например:

.container .columns.col-6 {
   width: 50%;
}

Таким образом, в этом случае у вас не будет места между двумя блоками.

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

поэтому вы можете использовать один из следующих двух подходов:

.container .columns.col-6 { 
   width: calc(50% - 10px); // 10px represents the margin / space
   margin-right:10px;
}

или

.container .columns.col-6 { 
   width:  46%;
   margin-right: 1%;
}

Первый подход лучше.