将容器内的分区在第一行中居中对齐，但在分区移动到下一行时向左对齐

Question

我在for循环中使用了除法。

  <?php
 for($ab=0; $ab<$total_sheets ;$ab++)
  {
 ?>
<div id="books" class="one-column">
    //printing some data here....
</div>
<?php
} 
?>

我想在这里，前4个分区，他们对齐到中心，之后，当分区不适合在同一行…它们移到下一行，并向左浮动。

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

我使用的CSS id books和它的容器如下:

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

But This将所有的分割对齐到容器的中心，即使分割超过单行。但我想要的是，当除法移到第二行时，它们自动向左移动，而第一行保持居中对齐。

请帮我解决这个问题。怎样才能实现这个设计呢?

Thanks in advance

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;}