html - 在居中 Div 内左对齐

Question

我有一个外部 div，它有一个 text-align : center; 主要是为了强制左右边框之间的间距相等，如 margin-left: auto; & margin-right:auto; 不这样做!。如何让外部 div 中的 div 左对齐而不是居中对齐？这是一个示例 fiddle http://jsfiddle.net/3mb4to76/5/第三个框需要放在第一个框下方的什么位置？

.bor{
    border:1px solid;
    width:100px;
    height:100px;
    margin:15px;
    display:inline-block;
}
.outer{
    width:300px;
    height:300px;
    border:1px dotted;
    text-align: center;
}

Answer 1

为什么不使用百分比宽度和边距来保持相等的间距？

.bor{
    border:1px solid;
    width:40%;
    height:100px;
    margin:5%;
    float:left;
    box-sizing:border-box;
}
.outer{
    width:300px;
    height:300px;
    border:1px dotted;
    box-sizing:border-box;
    padding:2%;
}

http://jsfiddle.net/3mb4to76/1/