我想使用父 div 中的所有可用空间使 div 居中。
看看this jsfiddle。使用这种方法,无论父级的宽度是多少,div 都将 float 在中心,从而在行的远端创建如此多的空白。
但我想让第一个和最后一个黄色框分别贴在左右边缘,中间的应该漂浮在中间。
当我调整父 div 的大小时,子 div 应该自动调整自己。
可能吗?
另一个问题,这是一个延续,我可以从标记中删除“行”div 并仍然获得相同的结果吗?
HTML:
<div class="container">
<div class="row">
<div>Row 1 1</div>
<div>Row 1 2</div>
<div>Row 1 3</div>
<div>Row 1 4</div>
</div>
<div class="row">
<div>Row 2 1</div>
<div>Row 2 2</div>
<div>Row 2 3</div>
<div>Row 2 4</div>
</div>
</div>
CSS:
body{
margin: 0;
padding: 0;
}
.container{
border: 1px solid #2aF1E2;
overflow: hidden;
}
.row{
margin: 10px;
border: 1px solid #2351E2;
overflow: hidden;
text-align: center;
}
.row div{
margin: 10px 0 10px 0;
display: inline-block;
width: 100px;
border: 1px solid #eac300;
padding: 5px;
text-align: initial;
}
最佳答案
你正在寻找的是Flexbox。无论如何,如果您能负担得起 wrapper ,我想您可以使用它。
但是使用 Pure CSS 你可以这样做:
HTML
<div class="container">
<div class="row">
<div class="wrap left"><div>Row 1 1</div></div>
<div class="wrap mid"><div>Row 1 2</div></div>
<div class="wrap mid"><div>Row 1 3</div></div>
<div class="wrap right"><div>Row 1 4</div></div>
</div>
<div class="row">
<div class="wrap left"><div>Row 2 1</div></div>
<div class="wrap mid"><div>Row 2 2</div></div>
<div class="wrap mid"><div>Row 2 3</div></div>
<div class="wrap right"><div>Row 2 4</div></div>
</div>
</div>
CSS
.row div div{
margin: 10px 0 10px 0;
display: inline-block;
width: 100px;
border: 1px solid #eac300;
padding: 5px;
text-align: initial;
}
.wrap {width: 25%; float: left;}
截图
fiddle :http://jsfiddle.net/praveenscience/p8DGH/3/
关于html - 使用所有可用空间在另一个 div 中居中 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15754664/