3 деления внутри родительского деления без автоматического изменения размера - PullRequest
Новая
       1

3 деления внутри родительского деления без автоматического изменения размера

0 голосов
/ 12 сентября 2010

Я новичок в веб-дизайне, и мне интересно, как я мог бы сделать что-то вроде этого: 

..........................
LEFT --- CENTER ---- RIGHT
..........................

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

Вот так это выглядит сейчас .

Мой текущий HTML: 

<div id="container_m">
    <div id="left">
        <p>My name is Barnabas</p>
    </div>
    <div id="right">
        <p>Till salu</p>
    </div>
    <div id="center">
        <p>Senaste nytt</p>
    </div>
</div>

Мой текущий CSS: 

#container_m
{
    position:absolute;
    height: 40%;
    width: 60%;
    left: 20%;
    top: 45%;
    background-color:rgba(0,0,0,0.2);

}

#left
{
    position: relative;
    height: 100%;
    width: 33%;
    float: left;
    background-color: blue;


}
#right
{
    position: relative;
    height: 100%;
    width: 33%;
    float: right;
    background-color: green;
}

#center
{
    position: relative;  
    height: 100%;
    width: 33%;
    margin:0 auto;
    background-color: yellow;           
}

Ответы [ 3 ]

4 голосов
/ 02 августа 2011

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

<div style="clear: both;"></div>

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

0 голосов
/ 12 сентября 2010

Вы можете упростить это в огромной степени: http://www.jsfiddle.net/fsnuh/

HTML:

id s не требуется для каждого ребенка, так как на вашем веб-сайте они имеют одинаковый стильclass Прилагается ниже исключительно для цветных фонов 

<div id="container_m">
    <div class="red">
        <p>My name is Barnabas</p>
    </div>

    <div class="yellow">
        <p>Till salu</p>
    </div>

    <div class="green">
        <p>Senaste nytt</p>
    </div>
</div>​

CSS

Стили для левого, правого и центрального элементов объединены в один.Устранено злоупотребление position: relative. 

#container_m
{
    position: absolute;
    height: 40%;
    width: 60%;
    left: 20%;
    top: 45%;
    background-color:rgba(0,0,0,0.2);
}

#container_m div
{
    height: 100%;
    width: 33.33%;
    float: left;
}

.red
{
    background-color: red;
}
.green
{
    background-color: green;
}

.yellow
{
    background-color: yellow;
}​
0 голосов
/ 12 сентября 2010

что с этим не так? Я изменяю размеры своего браузера, и они, кажется, становятся все больше и меньше. если вы говорите о том, что они не все встроенные, вам нужно сделать следующее: 

<div id="parent">
    <div id="left">
        Left Content
    </div>
    <div id="center">
        Center Content
    </div>
    <div id="right">
        Right Content
    </div>
</div>

А затем отправьте их все осталось. :)

...