获取父div以匹配内容的高度和宽度

问题描述：

父#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

答

将

overflow: hidden;

在#connect和.section伪

获取父div以匹配内容的高度和宽度

相关推荐