html - 将容器内的分区对齐第一行的中心，但在分区转移到下一行时向左对齐

Question

我正在使用除法在 for 循环中打印。

喜欢

  <?php
 for($ab=0; $ab<$total_sheets ;$ab++)
  {

 ?>
<div id="books" class="one-column">

    //printing some data here....
</div>
<?php
} 
?>

我想要的是，对于前 4 个分区，它们对齐到中心，之后当分区不适契约(Contract)一行时......它们移动到下一行，在那里它们向左浮动。

第一行居中 float ，其他行向左浮动。

我为 id books 使用的 CSS 及其容器如下:

    #container {max-width:80%;margin:0 auto;text-align:center;} 
    #container #books {display: inline-block; float:none;vertical-align:top;}

但是这会将所有分区对齐到容器的中心，即使分区超过单行也是如此。但我希望当分区传递到第二行时，它们会自动向左移动，而第一行保持居中对齐。

请帮我解决这个问题。如何实现这个设计？

提前致谢

Answer 1

使用这个:

 <?php
 for($ab=0; $ab<$total_sheets ;$ab++)
  {

 ?>
<div id="book<?php echo $ab;?>" class="books one-column<?php if ($ab >= 4) { echo " align-left"; } ?>">

    //printing some data here....
</div>
<?php
} 
?>

然后更新你的 CSS:

#container {max-width:80%;margin:0 auto;text-align:center;} 
#container .books {display: inline-block; float:none;vertical-align:top;}
#container .align-left {float: left;}