php - 在彼此下面添加多个 div 框并循环

Question

我想创建一个评级网站，但目前我正在努力让它们看起来像这样: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;  
}

非常感谢任何帮助

Answer 1

我会继续将您的元素包装在容器中，如下所示:

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

从 box 和 boxsmall 中移除 float 并将其添加到 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