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％。如果列（div）的数量是动态的，该怎么办？

可以通过javascript设置，但我想知道是否还有其他最佳做法？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

对于现代浏览器，您可以使用flex-box来支持一大堆令人敬畏的属性。请参阅：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: