在浏览器窗口调整大小时遇到调整div大小的问题

我有3个div。每一个都低于另一个。当浏览器窗口调整大小时，每个'应该'调整大小，但只有最后一个正确调整大小。如果有人能帮助我，我会非常高兴。

谢谢

div#content 
 
{ 
 
\t height:100%; 
 
\t width:100%; 
 
\t position:relative; 
 
\t background-size: cover; 
 
\t background-color:pink; 
 
\t font-family:arial; 
 
} 
 

 
div#block-wrapper 
 
{ 
 
    min-height:300px; 
 
\t min-width:100px; 
 
    background-color:orange; 
 
} 
 

 
div.group 
 
{ 
 
    border:1px solid black; 
 
\t position:absolute; 
 
    width:100%; 
 
    background-color:lightgreen; 
 
} 
 

 
div.heading 
 
{ 
 
\t font-size:2em; 
 
\t position:absolute; 
 
\t margin:50px 0px 50px 50px; 
 
\t line-height:50px; 
 
\t width:250px; 
 
\t height:50px; 
 
\t background-color:black; 
 
} 
 

 
div.heading h4 
 
{ 
 
\t color:white; 
 
\t position:relative; 
 
\t margin:0px 0px 0px 25px; 
 
} 
 

 
div.content 
 
{ 
 
     margin:150px auto; 
 
} 
 

 
div.bar 
 
{ 
 
    margin:25px 25px 25px 25px; 
 
    float:left; 
 
    position:relative; 
 
    width:200px; 
 
    height:20px; 
 
    background-color:darkgrey; 
 
}

<div id="content"> 
 
\t <div id="block-wrapper"> 
 
\t \t <div class="group"> 
 
\t \t \t <div class="heading"><h4>Level 1</h4></div> 
 
\t \t \t <div class="content"> 
 
\t \t \t      <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div id="block-wrapper"> 
 
\t \t <div class="group"> 
 
\t \t \t <div class="heading"><h4>Level 2</h4></div> 
 
\t \t \t <div class="content"> 
 
\t \t \t      <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div id="block-wrapper"> 
 
\t \t <div class="group"> 
 
\t \t \t <div class="heading"><h4>Level 3</h4></div> 
 
\t \t \t <div class="content"> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
           <div class="bar"></div> 
 
       
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

来源

2015-10-16 Daniel Drake

他们都是大小调整。 –

通过改变位置修正：绝对给位置：相对，使每一组浮动：左

来源

2015-10-16 09:48:32

在浏览器窗口调整大小时遇到​​调整div大小的问题

回答

相关问题

在浏览器窗口调整大小时遇到调整div大小的问题