JavaEar 专注于收集分享传播有价值的技术资料

将容器内的分区对齐到第一行的中心,但是当分割转移到下一行时,将左对齐 (Align divisions inside a container to center for first row but to left when divisions shift to next row)

I am using divisions to be printed inside a for loop.

Like

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

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

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

I want in this that for first 4 divisions they align to center and after that when divisions dont fit in same row ...they shift to next line where they float to left.

Float centre for first row and then float left for other rows.

CSS I am using for id books and its container is as follows:

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

But This aligns all the divisions to center of container even when divisions exceeds single row. But I want that as the divisions passes to second row , they automatically shift to left whereas first row remain centerally aligned.

Please help me out with this. How can achieve this design?

Thanks in advance

1个回答

    最佳答案

  1. 英文原文

    Use this:

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

    Then update your 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;}
    

    中文翻译

    使用此:

     &lt;?php
     for($ ab = 0; $ ab&lt; $ total_sheets; $ ab ++)
      {
    
     ?&GT;
    &lt; div id =" book&lt;?php echo $ ab;?&gt;"  class =" books one-column&lt;?php if($ ab&gt; = 4){echo" align-left" ;}?&gt;" &gt;
    
        //在这里打印一些数据....
    &LT; / DIV&GT;
    &LT; PHP
    }
    ?&GT;
     

    然后更新您的CSS:

      #container {max-width:80%; margin:0 auto; text-align:center;}
    #container .books {display:inline-block;浮:无;垂直对齐:顶部;}
    #container .align-left {float:left;}
     

    Use this:

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

    Then update your 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;}
    

    使用此:

     &lt;?php
     for($ ab = 0; $ ab&lt; $ total_sheets; $ ab ++)
      {
    
     ?&GT;
    &lt; div id =" book&lt;?php echo $ ab;?&gt;"  class =" books one-column&lt;?php if($ ab&gt; = 4){echo" align-left" ;}?&gt;" &gt;
    
        //在这里打印一些数据....
    &LT; / DIV&GT;
    &LT; PHP
    }
    ?&GT;
     

    然后更新您的CSS:

      #container {max-width:80%; margin:0 auto; text-align:center;}
    #container .books {display:inline-block;浮:无;垂直对齐:顶部;}
    #container .align-left {float:left;}