html - 均匀移动盒子的边距

Question

我有这个代码：

<style type="text/css">
    body > div { height: 260px; overflow: hidden; }
    div div { float: left; height: 250px; width: 250px; margin: 1px; background: #ccc; }
</style>

<div>
    <div>first 1</div>
    <div>first 2</div>
    <div>first 3</div>
    <div>first 4</div>
    <div>first 5</div>
</div>

我不会给这个盒子留出边距来均匀地移动它们。

Answer 1

由于容器的宽度是未知的，并且 div 的宽度以像素为单位固定（排除基于百分比的系统）——你不能用 CSS 做到这一点。

您可以使用http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support中描述的技术将它们居中，或者您可以查看 JavaScript（或者您可以设置父元素的宽度为已知值）。