親の#Connectには、＃unit1と＃unit2の2つの行があります。各行には、.col1と.col2の2つの列があります。私は2つの問題を抱えています：
- #Connectは＃unit1と同じくらい落ちるだけなので、青い背景が見えません。＃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>