Разделение DIV на строки и столбцы

Question

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

У меня есть #container div, который содержит основную часть содержимого веб-страницы.

Я хочу сделать sub div, чтобы я мог создавать строки в этом контейнере, каждый из фиксированной высоты.

Затем внутри каждой строки имеют либо 1 (100% ширину), либо 2 (ширина 48% каждая (с промежутком между каждой)) или 3 (30% ширины) внутри.

Так что я бы себе страницу, чтобы быть в состоянии иметь следующую структуру (или любой комбинации в зависимости от HTML)

нужно быть сделано только в CSS/HTML

и так что общий черный контейнер имеет фон, а также красные/зеленые/коричневые контейнеры также имеют фоновый цвет: rgba (0,0,0,0,5)

Я пробовал просто делать это только с divs

, например, один на 100% ширину, а затем накладывая на него 2% 50-процентные div, но они не сохранили свой размер даже при установке минимальной ширины для каждого div.

Может кто-то помочь с структурой css/html.

Большое спасибо.

Answer 1

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

И, как мне нужно, чтобы ввести код, это просто CSS участие: (. И кстати она реагирует)

* { 
    box-sizing: border-box; 
} 
.container { 
    width:100%; 
    max-width:600px; 
    border:2px solid black; 
    margin: 0 auto; 
    padding:10px; 
} 
.row { 
    height:100px; /*set height*/ 
    border:2px solid blue; 
    width:100%; 
    margin-bottom:10px; 
    padding:10px; 
} 
.col1 { 
    border:2px solid red; 
    width:100%; 
    height:100%;  
} 
.col2 { 
    border:2px solid green; 
    width:49%; 
    float:left; 
    height:100%; 
    margin-right:2%;  
} 
.col2:last-child {margin-right:0; } 
.col3 { 
    border:2px solid brown; 
    width:32%; 
    float:left; 
    height:100%; 
    margin-right:2%;  
} 
.col3:last-child {margin-right:0; } 

Answer 2

Что может быть лучшим решением, долгосрочный, буду использовать рамки начальной загрузки (разработанную твиттере), которая очень проста в использовании и имеет много привилегий:

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

http://getbootstrap.com/css/#grid

Answer 3

JSfiddle: https://jsfiddle.net/gqq7poje/1/

Как уже упоминалось в комментариях, вы используете display:inline-block иметь несколько столбцов в одной строке. Однако inline-block обрабатывает пробелы как символы, что затрудняет установку двух столбцов с width:50%. Как видно здесь: display: inline-block extra margin, вы можете исправить это, добавив font-size: 0px; ко всей строке.

Для того, чтобы иметь поля между колонками, вы делаете width:48% и margin:1%; в строку с двумя.

Как рекомендовано другими, рассмотрите возможность использования Bootstrap, поскольку он заботится о многих нюансах создания столбцов.

Answer 4

Может быть что-то вроде этого. HTML:

<div id="container"> 
<div class="row single">Your content</div> 
<div class="row double"> 
    <div class="column-2 left">Your content</div> 
    <div class="column-2 right">Your content</div> 
</div> 
<div class="row triple"> 
    <div class="column-3 left">Your content</div> 
    <div class="column-3 center">Your content</div> 
    <div class="column-3 right">Your content</div> 
</div> 
</div> 

CSS-:

#container { width: 80%; margin: auto; background-color: grey; padding: 20px; } 
.row { height: 150px; margin-bottom: 20px; position: relative; } 
.row div { height: 100%; } 
.single { background-color: white; } 
.column-2 { width: 48%; } 
.column-3 { width: 30%; } 
.left { background-color: yellow; float: left; } 
.center { float: left; margin: 0 5%; background-color: orange; } 
.right { background-color: green; float: right; } 

See a fiddle.