douyou8266 2016-08-21 08:47
浏览 12

我如何在PHP中创建6 <div>并安排在div包装器中?

I want to create 6 <div> in php by a loop with size of 200x200 px and arrange these 6 div in 3 rows and 2 columns inside a div wrapper. Thanks in advance

<div class="wrapper">
  <?php
  $i = 1;
 for ( $i=1 ; $i<=6; $i++){
   div1    div2
   div3    div4
   div5    div6
  }
  ?>
  </div> 
  • 写回答

1条回答 默认 最新

  • douchong4730 2016-08-21 09:02
    关注

    The generating of the divs is the easy bit - use the clear property in css and assign it using the nth-child syntax like so:

    <?php
        echo "<div class='wrapper'>";
        for( $i=0; $i < 6; $i++ ) echo "<div>$i</div>";
        echo "</div>";
    ?>
    

    To see the wrapper background colour it needs a height -the 2n+1 ~ this is defined in the css specification so you need only use it like it is. Have a look on css-tricks.com etc for use of nth-child, nth-of-type(odd) etc

    <style>
        .wrapper{
            background:blue!important;
            display:block;
            width:80%;
            min-height:calc( 600px + 7rem );
            float:none;
            clear:both;
            margin:1rem auto;
            box-sizing:border-box;
            border:2px solid black;
            border-radius:1rem;
    
        }
        .wrapper div{
            width:200px;
            height:200px;
            border:1px solid black;
            float:left;
            margin:1rem;
            display:block;
            background:whitesmoke;
        }
        .wrapper div:nth-child(2n+1){
            clear:left;
        }
    </style>
    
    评论

报告相同问题?

悬赏问题

  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗