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

问题描述：

我想根据它们的容器宽度相应地设置div元素宽度的宽度。但是，号码会改变，所以宽度将需要相应调整。这里是一个CSSDeck链接解释清楚的情况：根据静态宽度容器设置div元素宽度的数量

http://cssdeck.com/labs/hvmkapkd

正如你可以看到，这两个容器是相同的（需要），还他们有模块化的内容（<div>元素）（也需要）。保持相同的结构，是否可以使用CSS自动调整div的宽度，以填充整个容器？

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

是可以使用js吗？ jQuery的？ – melc

我一直在寻找一个纯粹的CSS解决方案，我只是找到它并将其发布为我自己问题的答案。 – Mia

答

我在发布问题后发现了解决方案。设置.container元素为table并将其设置为table-cell。

链接上面更新，但这里是链接再次反正： http://cssdeck.com/labs/hvmkapkd

答

给柔性盒概念的机会（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元素宽度的数量

相关推荐