固定宽度div内div元素的动态宽度

Question

我正在处理一个固定宽度的父div，它正在多个页面中使用。这个div里面有许多(3-5)子div元素。对于不同的页面，子div元素的数量不同，即对于第1页，父div有3个子div，对于第2页，父div有5个子div等等。

如何设置这些子元素的宽度，以便它们在每个页面中完全占据父div的宽度？

约束条件是不使用SASS/Less和Bootstrap。

Answer 1

基本上，您是在要求一个表，其中每个单元格的宽度应与父单元格固定宽度的比例相同。

在CSS中，如果您知道尽可能多的子单元格(如果不知道，那么就可以使用所有的空间，但是每个单元格的宽度会根据内容而改变)。

当您知道最大的if子值时，可以将该属性添加到.height：max-width:Npx类中，其中N是父级的width除以子级的数量。

​

.container {
    border:1px solid #000;
    border-radius:5px;
    width:500px;
    display:table;
}
.child{
    display:table-cell;
    border-right:1px solid #000;
}

.child:last-of-type {
    border:none;
}
.height{
    min-height:100px;
}

<div class="container height">
    <div class="child height">Child 1</div>
    <div class="child height">Child 2</div>
    <div class="child height">Child 3</div>
    <div class="child height">Child 4</div>
    <div class="child height">Child 5</div>
</div>

​

Answer 2

你可能想试试flex

​

.parent {
  width: 100%;
  background-color: blue;
  display: flex;
}

.child {
  height: 20px;
  background-color: red;
  margin: 10px;
  display: flex;
  width: 100%;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

​