Question

我想根据容器宽度相应地设置div元素宽度。但是，数字会改变，因此需要相应调整宽度。这是一个CSSDeck链接，可以清楚地解释这种情况：

http://cssdeck.com/labs/hvmkapkd

如您所见，两个容器都是相同的（需要），它们也具有模块化内容（<div>元素）（这也是必需的）。保持相同的结构，是否可以使用CSS自动调整div的宽度，以便它们填满整个容器？</ p>

然后第一个容器中的每个项目的宽度为33.333％，第二个容器中的每个项目的宽度为20％。

Answer 1

我在发布问题后立即找到了解决方案。将.container元素设置为table并将彩色内容设置为table-cell即可。

链接在上面更新，但无论如何这里是链接： http://cssdeck.com/labs/hvmkapkd

Answer 2

给flex-box概念一个机会（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes）

.container{
  height: 100px;
  width: 100px;
  background-color: lightgray;
  margin: 20px;


/* flexbox setup */
  display: -webkit-flex;
  -webkit-flex-direction: row;

  display: flex;
  flex-direction: row;  
}

.container > div {
  height: 100%;

/* flexbox setup */  
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}

（http://cssdeck.com/labs/full/hvmkapkd）

根据静态宽度容器设置div元素的宽度数

2 个答案: