的div容器的大小問題

早些時候我問一個關於格容器的水平定位的問題，現在我已經得到了跟進和相關的問題：的div容器的大小問題

（1）你可以在下面的HTML代碼看，我有一個「column_bottom」容器（用於鏈接）放置在「content_bottom」容器（用於頁面的主要內容）左側。當我向「content_bottom」容器中輸入更多內容以使其高度超過左側「column_bottom」容器的容量時，整個「content_bottom」容器將移至「column_bottom」容器的下方。我該怎麼做才能讓左邊的「column_bottom」容器的高度動態匹配右邊的「content_bottom」容器的高度（並且它們保持水平相鄰）？（2）正如你在下面的CSS樣式表中看到的，我嘗試通過試驗和錯誤手動設置「column_top」和「column_bottom」的寬度以em單位匹配。在不同系統的不同瀏覽器中，這種方法會有什麼問題嗎？我能做些什麼來確保「column_top」和「column_bottom」寬度始終匹配？

感謝您的幫助。

這裏的HTML：

<html> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="content-type"> 
<title>this is the site's title</title> 
<link rel="stylesheet" href="penonek.css" type="text/css"> 
</head> 
<body> 
<div class="wrapper"> 
<div class="column_top">site<br> 
</div> 
<div class="content_top">&nbsp;title<br> 
</div> 
<div class="column_bottom"> 
<ul> 
<li>home</li> 
<li><a href="#">link 1<br> 
</a></li> 
<li><a href="#">link 2<br> 
</a></li> 
<li><a href="#">link 3<br> 
</a></li> 
</ul> 
</div> 
<div class="content_bottom">main content here<br> 
</div> 
</div> 
</body> 
</html>

這裏是CSS：

body { 
    margin: 0; 
    padding: 0; 
    font-family: Arial,Helvetica,sans-serif; 
    text-align: center; 
    color: #cccccc; 
    background-color: black; 
    font-size: 1em; 
} 
.wrapper { 
    margin: auto; 
    min-width: 60em; 
    max-width: 60em; 
    font-family: Arial,Helvetica,sans-serif; 
    width: 60em; 
    color: #cccccc; 
} 
.column_top { 
    border-width: 0 0 0.25em; 
    border-bottom: 0.25em solid black; 
    width: 3.2em; 
    min-width: 3.2em; 
    float: left; 
    padding-top: 2em; 
    text-align: right; 
    color: #333333; 
    max-height: 1em; 
    background-color: #f4f4f4; 
    font-size: 3em; 
    min-height: 1em; 
    max-width: 3.2em; 
    height: 1em; 
    font-weight: bold; 
    padding-bottom: 0.2em; 
} 
.content_top { 
    border-width: 0 0 0.25em; 
    border-bottom: 0.25em solid #f4f4f4; 
    padding-top: 2em; 
    font-size: 3em; 
    min-height: 1em; 
    text-align: left; 
    max-height: 1em; 
    height: 1em; 
    font-weight: bold; 
    padding-bottom: 0.2em; 
} 
.column_bottom { 
    width: 9.28em; 
    text-align: right; 
    padding-top: 3em; 
    color: #333333; 
    border-bottom-width: 0; 
    background-color: #f4f4f4; 
    border-right-width: 0; 
    padding-right: 0.3em; 
    float: left; 
    border-left-width: 0; 
    min-width: 9.28em; 
    max-width: 9.28em; 
} 
.content_bottom { 
    padding: 3em 5em 5em; 
    border-collapse: separate; 
    text-align: left; 
    float: left; 
} 
.column_bottom ul { 
    margin: 0; 
    padding: 0; 
    text-decoration: none; 
    color: #333333; 
    list-style-type: none; 
    font-weight: inherit; 
} 
.column_bottom a:hover { 
    background-color: #999999; 
} 
.column_bottom a { 
    text-decoration: none; 
    font-weight: inherit; 
    color: #333333; 
}

來源

2011-02-12 hpy

用於.content_bottom添加的包裝與該CSS：

.content_bottom_wrapper { 
    width: 100%; 
    margin-left: -9.58em; 
    float: right; 
}

這添加到內容底部：

margin-left: 9.58em;

9.58em =對.column_bottom .column_bottom +填充右寬度

http://jsfiddle.net/p93fM/

來源

2011-02-12 23:13:12 Adam

這裏：

Live Demo

我在CSS中添加這.content_bottom

width:640px;

您可以根據需要調整邊距。

來源

2011-02-12 22:46:45

您正在使用.column_bottom的高度是目前〜6em，所以如果他添加更多的ul鏈接，他將不得不調整CSS。 – Adam 2011-02-12 23:15:35

@亞當 - 修正:) – 2011-02-12 23:29:36

的div容器的大小問題

回答

相關問題