Question

我是网页设计的新手，我想知道如何做到这样的事情：

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

它的一个父div位于窗口的中心，里面有3个div，就像列一样。我希望它们是动态的，因此它们总是扩展到浏览器窗口。

This is how it looks now

我目前的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;           
}

Answer 1

浮动div有时会破坏父div的自动调整大小。我所做的是确保父div的正确自动调整大小是将其添加到父div，就在最后一个浮动孩子的后面：

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

这可能是一个肮脏的修复或其他什么，但它确保父div始终与其子项一起调整。

Answer 2

那是错的吗？我正在调整我的浏览器大小，它们似乎变得越来越小。如果你在谈论他们不是全部内联的事实那么你需要这样做：

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

然后将它们全部左移。：）

Answer 3

你可以大大简化：http://www.jsfiddle.net/fsnuh/

HTML：

每个孩子都不需要{p> id，就像在您的网站上一样，它们的风格相同。 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;
}

父div内的3个div没有自动调整大小

3 个答案:

HTML：

CSS