css - 父 div 内的 3 个 div 不自动调整大小

Question

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

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

Its one parent div in the center of the window, with 3 divs inside like columns. I want them to be dynamic, so they always scale to the browser window.

This is how it looks now.

My current 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

float div 有时会破坏父 div 的自动调整大小。为了确保父 div 的适当自动调整大小，我所做的是将其添加到父 div，就在最后一个 float 子元素的后面:

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

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