Сделать сетку divs заполнять их назначенное пространство

Я новичок в CSS и жидкостных сетках. Я следую за этот учебник здесь:Сделать сетку divs заполнять их назначенное пространство

http://www.1stwebdesigner.com/tutorials/fluid-grids-in-responsive-design/

По предложению я прочитал там, я был CSS файл автоматически сгенерированных для меня. Я хотел создать заголовок с тремя частями, где каждая часть занимает 1/3 ширины экрана. Тем не менее, это выглядит как ширина дивы рушатся по размеру содержимого, как показано здесь:

Screenshot

Как сделать дивы заполнить ~ 33%, как я хочу, чтобы они?

Вот HTML:

<html> 
<head> 
    <title>Page Title</title> 
    <link href="testcss.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
<div class="containter_12"> 

    <div class="grid_4"> 

     <img src="logo.png"/> 

    </div> 

    <div class="grid_4"> 

     <b>ACPL Wellness</b> 
    </div> 

    <div class="grid_4"> 

     <b>Home</b> 
    </div> 
</div> 
</body> 
</html>

И вот CSS:

/* Containers 
----------------------------------------------------------------------------------------------------*/ 
.container_12 { 
    width: 92%; 
    margin-left: 4%; 
    margin-right: 4%; 
} 

/* Grid >> Global 
----------------------------------------------------------------------------------------------------*/ 

.grid_1, 
.grid_2, 
.grid_3, 
.grid_4, 
.grid_5, 
.grid_6, 
.grid_7, 
.grid_8, 
.grid_9, 
.grid_10, 
.grid_11, 
.grid_12 { 
    display:inline; 
    float: left; 
    position: relative; 
    margin-left: 1%; 
    margin-right: 1%; 
     font-size: 2em; 
} 

/* Grid >> Children (Alpha ~ First, Omega ~ Last) 
----------------------------------------------------------------------------------------------------*/ 

.alpha { 
    margin-left: 0; 
} 

.omega { 
    margin-right: 0; 
} 

/* Grid >> 12 Columns 
----------------------------------------------------------------------------------------------------*/ 


.container_12 .grid_1 { 
    width:6.333%; 
} 

.container_12 .grid_2 { 
    width:14.667%; 
} 

.container_12 .grid_3 { 
    width:23.0%; 
} 

.container_12 .grid_4 { 
    width:31.333%; 
} 

.container_12 .grid_5 { 
    width:39.667%; 
} 

.container_12 .grid_6 { 
    width:48.0%; 
} 

.container_12 .grid_7 { 
    width:56.333%; 
} 

.container_12 .grid_8 { 
    width:64.667%; 
} 

.container_12 .grid_9 { 
    width:73.0%; 
} 

.container_12 .grid_10 { 
    width:81.333%; 
} 

.container_12 .grid_11 { 
    width:89.667%; 
} 

.container_12 .grid_12 { 
    width:98.0%; 
} 



/* Prefix Extra Space >> 12 Columns 
----------------------------------------------------------------------------------------------------*/ 


.container_12 .prefix_1 { 
    padding-left:8.333%; 
} 

.container_12 .prefix_2 { 
    padding-left:16.667%; 
} 

.container_12 .prefix_3 { 
    padding-left:25.0%; 
} 

.container_12 .prefix_4 { 
    padding-left:33.333%; 
} 

.container_12 .prefix_5 { 
    padding-left:41.667%; 
} 

.container_12 .prefix_6 { 
    padding-left:50.0%; 
} 

.container_12 .prefix_7 { 
    padding-left:58.333%; 
} 

.container_12 .prefix_8 { 
    padding-left:66.667%; 
} 

.container_12 .prefix_9 { 
    padding-left:75.0%; 
} 

.container_12 .prefix_10 { 
    padding-left:83.333%; 
} 

.container_12 .prefix_11 { 
    padding-left:91.667%; 
} 



/* Suffix Extra Space >> 12 Columns 
----------------------------------------------------------------------------------------------------*/ 


.container_12 .suffix_1 { 
    padding-right:8.333%; 
} 

.container_12 .suffix_2 { 
    padding-right:16.667%; 
} 

.container_12 .suffix_3 { 
    padding-right:25.0%; 
} 

.container_12 .suffix_4 { 
    padding-right:33.333%; 
} 

.container_12 .suffix_5 { 
    padding-right:41.667%; 
} 

.container_12 .suffix_6 { 
    padding-right:50.0%; 
} 

.container_12 .suffix_7 { 
    padding-right:58.333%; 
} 

.container_12 .suffix_8 { 
    padding-right:66.667%; 
} 

.container_12 .suffix_9 { 
    padding-right:75.0%; 
} 

.container_12 .suffix_10 { 
    padding-right:83.333%; 
} 

.container_12 .suffix_11 { 
    padding-right:91.667%; 
} 



/* Push Space >> 12 Columns 
----------------------------------------------------------------------------------------------------*/ 


.container_12 .push_1 { 
    left:8.333%; 
} 

.container_12 .push_2 { 
    left:16.667%; 
} 

.container_12 .push_3 { 
    left:25.0%; 
} 

.container_12 .push_4 { 
    left:33.333%; 
} 

.container_12 .push_5 { 
    left:41.667%; 
} 

.container_12 .push_6 { 
    left:50.0%; 
} 

.container_12 .push_7 { 
    left:58.333%; 
} 

.container_12 .push_8 { 
    left:66.667%; 
} 

.container_12 .push_9 { 
    left:75.0%; 
} 

.container_12 .push_10 { 
    left:83.333%; 
} 

.container_12 .push_11 { 
    left:91.667%; 
} 



/* Pull Space >> 12 Columns 
----------------------------------------------------------------------------------------------------*/ 


.container_12 .pull_1 { 
    left:-8.333%; 
} 

.container_12 .pull_2 { 
    left:-16.667%; 
} 

.container_12 .pull_3 { 
    left:-25.0%; 
} 

.container_12 .pull_4 { 
    left:-33.333%; 
} 

.container_12 .pull_5 { 
    left:-41.667%; 
} 

.container_12 .pull_6 { 
    left:-50.0%; 
} 

.container_12 .pull_7 { 
    left:-58.333%; 
} 

.container_12 .pull_8 { 
    left:-66.667%; 
} 

.container_12 .pull_9 { 
    left:-75.0%; 
} 

.container_12 .pull_10 { 
    left:-83.333%; 
} 

.container_12 .pull_11 { 
    left:-91.667%; 
} 




/* Clear Floated Elements 
----------------------------------------------------------------------------------------------------*/ 

/* http://sonspring.com/journal/clearing-floats */ 

.clear { 
    clear: both; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; 
} 

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */ 

.clearfix:after { 
    clear: both; 
    content: ' '; 
    display: block; 
    font-size: 0; 
    line-height: 0; 
    visibility: hidden; 
    width: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

* html .clearfix { 
    height: 1%; 
} 

.clearfix { 
    display: block; 
}

источник

2013-07-16 James Harpe

Правильно ли указан ваш путь к файлу CSS? – Xareyo

Проблема намного проще, чем я изначально думал! Прочитайте первое определение класса div: он говорит, что вместо контейнера_12 вместо контейнера_12 указывается содержимое. Это должно исправить!

источник

2013-07-16 16:06:15

Спасибо! Иногда вам просто нужен еще один набор глаз, чтобы увидеть такие вещи! –

Я пытаюсь использовать этот CSS сброс http://meyerweb.com/eric/tools/css/reset/ на каждой странице, я строю. Это помогает мне избежать многих из этих проблем. Вы можете попробовать это первым?

Если это не поможет решить вашу проблему, попробуйте использовать функцию Google Chrome и ее элемент Inspect, чтобы найти что-то не так.

источник

2013-07-16 15:59:08

Вы не определили ширину .grid_4

Попробуйте добавить это в CSS файле

.grid_4 { 
    width: 33%; 
}

Если ДИВ на самой правой (тот, который говорит «дом») появляется под два других, уменьшите ширину до тех пор, пока они не поместятся на экране.

источник

2013-07-16 16:01:31 user2584008

Я определил, что (или, по крайней мере, генератор сделал). если вы прокрутите вниз, вы увидите, что оно установлено в 31.333% –

Сделать сетку divs заполнять их назначенное пространство

ответ

Смежные вопросы