Question

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

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

P.S。约束是不使用SASS / Less和Bootstrap。

Answer 1

基本上你要求的是一个表格，其中每个单元格的宽度应该与父级的固定宽度成比例。

如果您知道最大可能的子项数，则可以在CSS中使用（如果不是，您将始终使用所有空间，但每个单元格的宽度将根据内容而变化）

当你知道子女的最大数量时，你将该属性添加到课程.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>

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

2 个答案: