html - 使用所有可用空间在另一个 div 中居中 div

Question

我想使用父 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;
}

Answer 1

你正在寻找的是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/