在彼此之下添加多个div框并循环

时间:2016-03-24 15:00:16

标签: php html css positioning

我希望创建一个评级网站,但目前我正努力让它们看起来像这样:Desired Result

目前我遇到了这个问题:

Current Position

这是我的html / php:

<div id="center">
<?php
  for ($i = 0; $i<3; $i++) {
    ?><div class="floating-box">No Content</div>
    <div class="floating-boxsmall">No Content</div>
    <?php
  }
?>

这是我的相关CSS:

   #center {
    position: fixed;
    top: 50%;
    left: 30%;
    margin-top: -100px;
    margin-left: -150px;
}

.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #0076be;  
}
.floating-boxsmall {
    float: left;
    width: 150px;
    height: 15px;
    margin: 10px;
    border: 3px solid #0076be;  
}

非常感谢任何帮助

3 个答案:

答案 0 :(得分:0)

我会继续将你的物品包装在一个像这样的容器中:

<?php for ($i = 0; $i<3; $i++) { ?>
  <div class="floating-item">
    <div class="floating-box">No Content</div>
    <div class="floating-boxsmall">No Content</div>
  </div>
<?php } ?>

boxboxsmall移除浮动内容,然后将其添加到floating-item

#center {
  position: fixed;
  top: 50%;
  left: 30%;
  margin-top: -100px;
  margin-left: -150px;
}

.floating-item {
  float: left;
}

.floating-box {
  width: 150px;
  height: 75px;
  margin: 10px;
  border: 3px solid #0076be;  
}

.floating-boxsmall {
  width: 150px;
  height: 15px;
  margin: 10px;
  border: 3px solid #0076be;  
}

为了免除未来的麻烦,请不要忘记清除物品:

http://learnlayout.com/clearfix.html

答案 1 :(得分:0)

用父容器包装.floating-box.floating-boxsmall

.parent{
  width: 150px;
  margin:10px;
  float:left;
}

然后在您的子容器中,删除浮动并最终删除左/右边距,因为您要在父容器中分配它们:

.floating-boxsmall{
  float:left;
  margin: 10px 0;
}
.floating-box{
  float:none;
  margin:0px; 
}

在您的PHP中:

<?php
  for ($i = 0; $i<3; $i++) {?>
    <div class="parent">
      <div class="floating-box">No Content</div>
      <div class="floating-boxsmall">No Content</div>
    </div>
    <?php
  }
?>

没有测试过这个,但它应该可行。你肯定需要一个父容器。玩它。

答案 2 :(得分:0)

&#13;
&#13;
#center{

  margin:0px auto;

}

.floating-box, .floating-boxsmall{
 display:block;
 float:left;
  margin:10px 5px;
  background-color:#ccc;
  text-align:center;  
  padding:20px;

}

.floating-box{
  min-height:100px;
}
&#13;
<div id="center">
<div class="floating-box">No Content</div>
    <div class="floating-boxsmall">No Content</div>
    <div class="floating-box">No Content</div>
    <div class="floating-boxsmall">No Content</div>
    <div class="floating-box">No Content</div>
    <div class="floating-boxsmall">No Content</div>
    </div>
&#13;
&#13;
&#13;

以下是fiddle