CSS，HTML無法將div內容放在div標籤內

嗨，我有關於我的div標籤的問題。我遵循這個教程，我專門做了他所做的並得到了不同的結果。我已經搜索了這個，我找不到答案。CSS，HTML無法將div內容放在div標籤內

問題是我的content_wrapper div中的div標籤不會將自己置於content_wrapper div中，即使我專門做了與本教程中相同的操作。相反，div標籤將自己置於我的content_wrapper div底部。如果有任何幫助，我正在使用Dreamweaver CS5。

這是我怎麼寫我的div：

<body> 

    <div id="header"> This is my header </div> 

    <div id="content_wrap"> 

     <div id="left_content"> Advertisement </div> 

     <div id="right_content"> </div> 

    </div> 

</body>

這是我的CSS：

#header{ 
    height:1000px; 
    width:1000px; 
    margin-left:auto; 
    margin-right:auto; 
    border:solid 1px; 
} 

#content_wrapper{ 
    height:800px; 
    width:980px; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:10px; 
    } 

#left_content { 
    height:800px; 
    width:240px; 
    float:left; 
    margin-left:auto; 
    margin-right:auto; 
    border:solid 1px; 

} 

#right_content { 
    height:800px; 
    width:730px; 
    margin-left:10px; 
    margin-right:auto; 
    float:right; 
    border:solid 1px; 
    }

來源

2013-02-08 user2055955

'content_wrap'！='content_wrapper' – Barmar 2013-02-08 22:22:54

檢查你的CSS的寬度，高度，邊距和填充。 – j08691 2013-02-08 22:23:46

你的左，右的div正在崩潰，因爲你還沒有清除父DIV（包裝）。一類添加到您的<div id="content_wrap" class="clearfix">

.clearfix:after{ 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
    font-size: 0; 
}

來源

2013-02-08 22:24:08 ashley

的div ID爲「content_wrap」不匹配CSS參考「content_wrapper」

來源

2013-02-08 22:24:57

這是事實，但這不是他問題的答案。這就是爲什麼我發佈它作爲評論，而不是答案。 – Barmar 2013-02-08 22:30:33

我看到除了對你的問題的評論中提到的ID不匹配的一些問題。

首先，右浮動元素需要先到達。然後，浮動元素的寬度總和小於包裝元素的寬度，包括填充和邊距，或者換行到新行。

最後，您可能不希望浮動元素上的自動邊距。我無法確定，因爲我不確定你以後的樣子。

http://jsfiddle.net/z8Gwg/

#header { 
    height:100px; 
    width:100px; 
    margin-left:auto; 
    margin-right:auto; 
    border:solid 1px; 
} 
#content_wrapper { 
    height:80px; 
    width:98px; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:10px; 
    background-color: #eee; 
} 
#left_content { 
    height:80px; 
    width:20px; 
    float:left; 
    border:solid 1px; 
    overflow: hidden; 
} 
#right_content { 
    height:80px; 
    width:70px; 
    float:right; 
    border:solid 1px; 
} 

<body> 
    <div id="header">This is my header</div> 
    <div id="content_wrapper"> 
     <div id="right_content"></div> 
     <div id="left_content">Advertisement</div> 
    </div> 
</body>

來源

2013-02-08 22:29:58 isherwood

右上角的元素不需要先到達。只要CSS中沒有明確的浮動元素。 – 2013-02-08 23:00:03

你說得對，邁克。謝謝。我正在考慮一個單浮動的場景，浮動需要在其他內容之前出現。 – isherwood 2013-02-10 14:29:58

CSS，HTML無法將div內容放在div標籤內

回答

相關問題