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

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".

希望这会有所帮助。