-2
父#Connect有兩行#unit1 &#unit2。每行有兩列.col1 & .col2。我有兩個問題:獲取父div以匹配內容的高度和寬度
- #連接只能得到#單元1 - 所以我看不到藍色背景。我希望#Connect的寬度與瀏覽器一樣寬,但與其內容一樣高。
- 我想要#unit1 &#unit2有一個與#Connect一樣寬的背景,和.col2一樣高。目前,我看不到任何背景。
下面是代碼:
<html>
<head>
<title></title>
<link type="text/css" href="colReflow.css" rel="stylesheet">
<style>
#connect .col1{
float: left; width: 240px; background-color: #ffc0cb;
}
#connect .col2{
background-color: yellow; margin-left: 248px;
}
#connect .offCont{
position: relative; top: 0; left: 0; float: left;
width: 210px;height:256px;
color: #000000;
font-family: "TrumpGothicEastBold",Arial,helvetica,sans-serif;
text-transform: uppercase;
margin: 10px 10px 0 0;
background: #9acd32;
}
#connect .section{
/*I want the background to be as 100% width of Connect and the height of the contents of col2*/
background: #ff69b4;clear: both; width: 100%;
}
</style>
</head>
<body>
<div id="connect">
<div id="unit1" class="section">
<div class="col1">This column is used solely to hold this area.</div>
<div class="col2">
<div class="offCont">drgdrg</div>
<div class="offCont">drgdrg</div>
<div class="offCont">drgdrg</div>
<div class="offCont">drgdrg</div>
</div>
</div>
<div id="unit2" class="section">
<div class="col1">This column is used solely to hold this area.</div>
<div class="col2">
<div class="offCont">I want this section or unit 2 to be as tall as the contents of col2</div>
<div class="offCont">drgdrg</div>
<div class="offCont">drgdrg</div>
<div class="offCont">drgdrg</div>
</div>
</div>
</div>
</body>
</html>
這裏回答我自己。把溢出:隱藏;在#connect和.section類上。 – vsiege 2013-02-14 19:09:44