如何浮动容器内的元素

Question

我试图把#container放在屏幕的中心，并在#container的内部制作'图表'float:left。

但随着我下面的代码，'图表'位于#container下。任何人都可以告诉我如何更改代码？并告诉我为什么代码使#container以外的'图表'。

#container { 
 
    margin: auto; 
 
    width: 10%; 
 
    border: 3px solid #73AD21; 
 
    padding: 10px; 
 
} 
 
#id1, 
 
#id2, 
 
#id3, 
 
#id4 { 
 
    float: left; 
 
    font-size: 30px; 
 
}

<div id="container"> 
 
    <div id="id1"> 
 
    <p>chart1</p> 
 
    </div> 
 
    <div id="id2"> 
 
    <p>chart2</p> 
 
    </div> 
 
    <div id="id3"> 
 
    <p>chart3</p> 
 
    </div> 
 
    <div id="id4"> 
 
    <p>chart4</p> 
 
    </div> 
 
</div>

Answer 1

当你添加浮到你取出文件的自然流动的元素。

您将需要添加某种clearfix到浮动项目的包装。

.clearfix:before, 
 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 

 
.clearfix:after { 
 
    clear: both; 
 
} 
 

 
#container{ 
 
    margin: auto; 
 
    width: 10%; 
 
    border: 3px solid #73AD21; 
 
    padding: 10px; 
 
} 
 
#id1, 
 
#id2, 
 
#id3, 
 
#id4 { 
 
    float:left; 
 
    font-size: 30px;  
 
}

<div id="container" class="clearfix"> 
 
    <div id="id1"><p>chart1</p></div> 
 
    <div id="id2"><p>chart2</p></div> 
 
    <div id="id3"><p>chart3</p></div> 
 
    <div id="id4"><p>chart4</p></div> 
 
</div>

UPDATE

如果宽度是固定的，你为什么会漂浮的div？

Answer 2

无论何时您float您需要清除float项目，如果您应用相同的属性，请使用类别，而不是ID。 增加width您的容器，以便有2项，每行如上

.cf:before, 
 
.cf:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 
.cf:after { 
 
    clear: both; 
 
} 
 
#container { 
 
    margin: auto; 
 
    width: 24%; /* to have 2 divs per row */ 
 
    border: 3px solid #73AD21; 
 
    padding: 10px; 
 
} 
 
.float { 
 
    float: left; 
 
    font-size: 30px; 
 
}

<div id="container" class="cf"> 
 
    <div class="float"> 
 
    <p>chart1</p> 
 
    </div> 
 
    <div class="float"> 
 
    <p>chart2</p> 
 
    </div> 
 
    <div class="float"> 
 
    <p>chart3</p> 
 
    </div> 
 
    <div class="float"> 
 
    <p>chart4</p> 
 
    </div> 
 
</div>