2013-02-14 238 views
-2

父#Connect有兩行#unit1 &#unit2。每行有兩列.col1 & .col2。我有兩個問題:獲取父div以匹配內容的高度和寬度

  1. #連接只能得到#單元1 - 所以我看不到藍色背景。我希望#Connect的寬度與瀏覽器一樣寬,但與其內容一樣高。
  2. 我想要#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> 
+0

這裏回答我自己。把溢出:隱藏;在#connect和.section類上。 – vsiege 2013-02-14 19:09:44

回答

-1

overflow: hidden; 

在#connect和.section僞

相關問題