Question

我有一个div（比方说div_A），其中包含许多子组件，如div，text等。我将div_A设计为可重复大小。 div_A可以正确re_sizable，但其中的组件不是re-size。当我重新调整div_A大小时，div_A中的所有组件都保持其先前的大小。重新调整div_A大小时如何重新调整所有组件的大小？

这是我的代码：

      .resizable{ 
        overflow: hidden;  
        resize:both;
        background-size: cover;    
      }
   
      
    #div1_panel {
        width: 150px; 
        height: 150px; 
        position: absolute; 
        top: 0px; 
        left: 0px; 
        z-index: 0;  
        resize:both
    }
      
    #div1{background-color: antiquewhite;   width: 100px;   height: 30px} 
    #div2{background-color: red;   width: 100px;   height: 30px}
    #div3{background-color: chocolate;   width: 100px;   height: 30px}
    #div4{background-color: coral;   width: 100px;   height: 30px}

  </style>

<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
        
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
    
  <script type = "text/javascript" src = "jquery.min.js"></script> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>    
     
</head>
    
<body>
<div id="div_holder">
    
    <div id="div1_panel" class="panel panel-primary resizable"  >
        <div class="panel-heading draggable-handler">
            <h3 class="panel-title"><b>Div1</b></h3>
        </div>
        
        <div class="panel-body">
            Hi, I'm a Resizable Text....
            <div id="div1">Div 1</div>
            <div id="div2">Div 2</div>
            <div id="div3">Div 3</div>
            <div id="div4">Div 4</div>
        </div>
    </div>
    
</div>

</body>
</html>

Answer 1

您的父级div应保持实际大小，即PX，且子级应为父级的相对大小，即%，请参阅示例https://jsfiddle.net/rcou7ts5/1/

.panel-body{height: 100%;}  
    #div1{background-color: antiquewhite;   min-width: 100px;   height: 20%;} 
    #div2{background-color: red;   min-width: 100px;   height: 20%;}
    #div3{background-color: chocolate;   min-width: 100px;   height: 20%;}
    #div4{background-color: coral;    min-width: 100px;   height: 20%;}

如何在可重复大小的div中重新调整所有组件的大小？

1 个答案: