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书籍，其容器如下：

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

将容器内的分区对齐到第一行的中心，但是当分割转移到下一行时，将左对齐

1 个答案: