如何像矩阵一样在行和列中对齐html div
如何像矩阵一样在行和列中对齐html div
提问于 2016-06-09 05:03:04
我尝试这样对齐6个div：
1 2 3
4 5 6但是我不知道怎么做，所有的div都是用百分比表示的
#folders {
background: #1abc9c;
height: 95%;
width: 15%;
}回答 2
Stack Overflow用户
发布于 2016-06-09 05:11:08
.folders{
height: 150px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-around;
text-align: center;
background-color: #efefef;
}
.folder {
flex-basis: 30%;
flex-shrink: 0;
padding: 10px 0;
background-color: #1abc9c;
}<div class="folders">
<div class="folder">1</div>
<div class="folder">2</div>
<div class="folder">3</div>
<div class="folder">4</div>
<div class="folder">5</div>
<div class="folder">6</div>
</div>
Stack Overflow用户
发布于 2016-06-09 05:14:37
看起来你有两个问题：
，
- ，根据你的描述，你的百分比是没有任何意义的。它们应该是1/3的宽度和1/2的高度。
- 你可能正在处理一个老的CSS问题，宽度和高度是基于最后一个非
staticpositioned元素的，这意味着这些元素的大小往往显示不正确。
基于这一点，下面是一个正确的方法：
.div-wrapper
{
position: relative;
}
.div-wrapper div {
width: 33.3%;
height: 50%;
float: left;
border: 1px solid black;
box-sizing: border-box;
}<div class="div-wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
百分比将被更正，非static的父元素将确保这些百分比反映其大小。relative本质上只是解决这个问题的老牌CSS hack。
float本质上指示浏览器尝试将它们全部绘制在同一条线上，但如果不能，则转到下一条线。就像文本的自动换行一样。left和替代方法right指定应用浮点数的元素的顺序。
使用box-sizing: border-box;还允许您向div添加边框，而不必对宽度/高度执行任何calc，并且大小仍然可以正常工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37712877
复制相关文章
相似问题
腾讯云开发者
