Question

（HTML / CSS）

如何设置动态宽度的容器，但其中的每个部分具有相等的宽度，以便它们与容器同时调整大小？

.container{
width:80%;
}
.section{
position:relative;
float:left;
width: 80%/6; <---- pseudo code
}

有6个相等的部分。例如，如果.container是900px，那么每个.section将是150px。如果.container是1200px，那么每个.section将是200px。

Answer 1

我最近开始使用网络开发。但是，我希望这个答案对您有所帮助。

 If your    class="section"    is within your     class="container"    , your browser will     
 assume that your    class="section"     width  is part of it's parent. It's parent is in    
 this case the        class="container".


 .container{
  width:80%;
  }   


 The     class="container"     width is based upon the width of it's parent. 
 The correct formula for this is: target/context=result

 Thus your    class="container"     width is in this case 80% and this based on the width      
 of the parent of your     class="container".

 Your     class="section"     width is inside your      class="container"    and is in     
 this case 80%, thus this width is based on it's parent width. 
 So your     class="container"     is now seen as 100% and your    class="section"     is 
 80% of your     class="container".

希望这有点帮助。

动态宽度容器上的部分宽度相等？

1 个答案: