CSS渲染並不像它應該

這是怎麼我的網頁看看，任何人都可以看到，它不是呈現的右： enter image description here CSS渲染並不像它應該

我將張貼在這裏我的問題我的CSS的HTML和零件。

<body> 
<img id="logo" src="res/img/logo.png" /> 
<div id="content"> 
    <div id="main-panel"> 
     <div class="headline">People in the database</div> 
     <table width="100%" border="0" id="people"> 
      <tr class="table-headline"> 
      <td width="3%">#</td> 
      <td width="90%">Name</td> 
      <td width="7%">&nbsp;</td> 
      </tr> 
     </table> 
    </div> 

    <div id="right-panel"> 
     <div class="headline">Here is where the tools will be posted</div> 
     This is the tools panel. 
    </div> 
</div> 
</body> 
</html>

和CS ...

html { 
    text-align: center; 
    background-color: #eeeeee; 
    -webkit-box-shadow: 10px 20px 20px #666; 
    box-shadow: 10px 20px 20px #666; 
} 
body { 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #ffffff; 
    width: 960px; 
    text-align: left; 
    border-radius: 4px; 
    border: 1px solid #666; 
    padding-top: 10px; 
    -webkit-box-shadow: 0px 6px 15px 0px #aaa; 
    box-shadow: 0px 6px 15px 0px #aaa; 
    -moz-box-shadow: 0px 6px 15px 0px #aaa; 
    padding-right: 10px; 
    padding-bottom: 10px; 
    padding-left: 10px; 
} 

#logo { 
    width: 150px; 
    height: auto; 
    margin-bottom: 10px; 
} 

#content { 
    position: relative; 
    min-height: 400px; 
    font-size: 14px; 
} 
#content .headline { 
    height: 24px; 
    padding-left: 5px; 
    padding-right: 5px; 
    font-family: "Segoe UI"; 
    font-size: 12px; 
    line-height: 24px; 
    background-image: url(img/headlineBackground.png); 
    clear: right; 
    float: none; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    border-bottom-color: #666666; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-topright: 5px; 
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-top-right-radius: 5px; 
} 

#content #main-panel { 
    width: 740px; 
    margin-right: 10px; 
    float: left; 
    position: relative; 
} 
#content #right-panel { 
    float: right; 
    position: relative; 

}

我會搜索谷歌，但我真的不知道要尋找什麼？請告訴我哪裏是錯誤的，也許如何改善我的CSS ......當然，如果您需要更多幫助，請告訴我！

來源

2013-07-24 Victor

你浮在容器元素中的元素，只要加入這行之前，你的父母DIV關閉以清除浮動

<div style="clear: both;"></div> 
<!-- Don't use inline styles, I've used it only for a demo 
    purpose here, consider using a self clearing class or a 
    class with a property clear: both; -->

Demo

更多關於clear: both;

有各種其他方法來清除浮游物，如在容器元素上使用overflow: hidden;，我不推薦使用它，或者使用像這樣的自動清除類

.clear:after { 
    clear: both; 
    display: table; 
    content: ' '; 
}

注：:after不會在IE8中工作，你可以使用CSS3餡餅作爲填充工具，使CSS3僞選擇工作。

來源

2013-07-24 11:33:17

我應該爲每個div指定'clear：both;'屬性嗎？ – Victor

@Victor不是每個'div'，只是到了擁有浮動div的父元素的末尾，你可以閱讀我的文章，爲什麼使用清晰的兩個，我已經在我的答案中提供了一個鏈接，你會得到它 –

好的謝謝，我相信你:) – Victor

清除這樣浮動的div下面的一行：

<body> 
<img id="logo" src="res/img/logo.png" /> 
<div id="content"> 
    <div id="main-panel"> 
     <div class="headline">People in the database</div> 
     <table width="100%" border="0" id="people"> 
      <tr class="table-headline"> 
      <td width="3%">#</td> 
      <td width="90%">Name</td> 
      <td width="7%">&nbsp;</td> 
      </tr> 
     </table> 
    </div> 

    <div id="right-panel"> 
     <div class="headline">Here is where the tools will be posted</div> 
     This is the tools panel. 
    </div> 
    <br style="clear: both;" /> 
</div> 
</body> 
</html>

另外，您可以使用display: inline-block設置這兩個彼此相鄰。

來源

2013-07-24 11:34:57 LinkinTED

CSS渲染並不像它應該

回答

相關問題