0

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

http://cssdeck.com/labs/hvmkapkd

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

那么第一个容器中的每个项目将具有 33.333% 的宽度，而第二个容器中的每个项目将具有 20% 的宽度。

4

2 回答 2

1

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

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

于 2013-11-03T20:23:59.247 回答
1

给 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）

于 2013-11-03T21:15:43.030 回答