html - 网格布局在两个 div 之间居中 div

Question

我已经设法将行类中的一个 div 元素居中，但是当我在左侧和右侧添加另外两个 div 时，我无法让元素在它们的正确位置流动(一个在最左边和一个在最右边)。

这是我在 code pen 上的代码

<div class="row">
    <div class="col-1-12">
        Left
    </div>

    <div class="col-3-12 centred">
        Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>  


     <div class="col-1-12 offset-10-12">
         right
     </div>
</div>

Answer 1

也许你可以尝试使用 offset- 和 col- 类:

<div class="row">
    <div class="col-1-12">left</div>
    <div class="col-4-12 offset-3-12">Duis aute ...</div>
    <div class="col-1-12 offset-3-12">right</div>
</div>

请注意，如果您的网格是基于 12 列的，则您需要偏移量和列的总和恰好为 12 以使其适合。

演示:http://jsfiddle.net/EBZHJ/