html - div 内联 block 的使用和动态宽度取决于 div 的数量

Question

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

test.html

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

test.css

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

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

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

Answer 1

您可以使用 CSS 表格。他们是very well supported和 dead easy to work with .

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