我知道之前已经问过类似的问题,但是我没有看到父div具有未知宽度且具有明确答案的问题.
所以情况就是这样.
<style> .parent { width: 100%; } .child { width: 300px; float: left; } </style> <div class="parent> <div class="child></div> <div class="child></div> <div class="child></div> <div class="child></div> <div class="child></div> <div class="child></div> ... <div class="child></div> <div>
解决方法
这是最近的解决方案,不使用javascript.
它是显示:内联块;这使得divs侧杆并同时处于中心位置.我试着将.parent转换为display:table-cell;但没有奏效.所以需要使用实际的< table>对于强大的居中行为.
它是显示:内联块;这使得divs侧杆并同时处于中心位置.我试着将.parent转换为display:table-cell;但没有奏效.所以需要使用实际的< table>对于强大的居中行为.
编辑:http://jsfiddle.net/Dgdhr/1(没有桌子:感谢MartinodF)
<table width="100%"> <tr> <td align="center"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> </td> </tr> </table> .child { width: 100px; height:100px; margin:10px; display:inline-block; background:#e0e0e0; }