div 内联块的用法和动态宽度取决于 div 的数量

Question

基本上，我需要水平显示div并自动设置它们的宽度。

测试.html

<div class="mypanel">
   <div class="col">
       ...
   </div>
   <div class="col">
       ...
   </div>
   <div class="col">
       ...
   </div>
</div>

测试.css

.mypanel .col {
    display: inline;
    width: 33%;
}

如果有 3 列，那么这没关系，所以我可以将宽度设置为 33%。如果列数 （div） 是动态的怎么办？

它可能是由javascript设置的，但我想知道是否有其他最佳实践？

Answer 1

你可以

使用CSS Tables。它们得到了很好的支持，并且非常易于使用。

.mypanel {
  display:table;
  width:100%;
}
.mypanel .col {
  display:table-cell;
}
/* Small screens */
@media all and (max-width: 500px) {
  .mypanel, .mypanel .col {
      display:block;
  }
}

<div class="mypanel">
   <div class="col">
       ...
   </div>
   <div class="col">
       ...
   </div>
   <div class="col">
       ...
   </div>
</div>

对于现代浏览器，您可以使用支持大量出色属性的flex-box。请参阅：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

.mypanel {
  display:flex;
}
.mypanel .col {
  flex-grow: 1;
}
/* Small screens */
@media all and (max-width: 500px) {
  .mypanel {
     display:block;
   }
}

<div class="mypanel">
   <div class="col">
       ...
   </div>
   <div class="col">
       ...
   </div>
   <div class="col">
       ...
   </div>
</div>