我的内容不会进入包装

Question

我无法让我的内容进入包装器，它只显示在左侧

<div id="middle">   
    <div class="wrapper">
    <div id="image_rose"><img src="assets/rose.jpg"/></div>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci.</p>
    <img src="assets/leef.png" />
    <p>Text Input:</p>

CSS：

.wrapper{
    background-color:#666666;
    width:900px;
    margin:0px auto;
    text-align:left;
}

#middle{
    background-color:#666;
    width:900px;
    float:left;}

Answer 1

你将你的内容和包装器放入#middle，它向左浮动。包装器大小和中间相同，所以只是左侧的站点。

Answer 2

您可以清除浮动，如下所示： 明确：两个

Answer 3

如果内容显示在div之外，您可以尝试在css中为该特定div添加overflow: hidden;或不同的溢出设置。

Answer 4

尝试使用此布局来集中中间内容

<强> HTML

<div id="wrapper">

   <div id="middle">

   </div>

 </div>

<强> CSS

#wrapper
{
width:100%;
padding:0px;
margin:0px;
}

#middle
{
 margin:0 auto;
 width: 600px;
}