嵌套 Div 以不同高度显示

Question

我正在开发一个从 PHP 数据库中提取不同食品的网页。有一个元素是保存检索到的值div的多个 s 的父元素。div由于某种原因，它们的表现非常奇怪。我将附上一张照片以及我正在使用的 HTML、PHP 和 CSS 代码。https://i.stack.imgur.com/ZDFip.png HTML：<main>    <div id="items">        <?php getTheFoodItems(); ?>    </div></main>PHP：<?php foreach($food_items as $item) : ?>// Inserts a line break for every 4 items<?php if (($i % 4) == 0 ) {    echo "<br/>";} ?><div class="food-item"><h4> <?php echo $item['name']; ?> - <?php echo $item['price']; ?> </h4><p> <?php echo $item['description'];?> </p></div><?php $i++; ?><?php endforeach;?>CSS：main {    margin-top: 50px;    margin-bottom: 50px;}#items {    margin: 10px 100px 10px 100px;    text-align: center;}.food-item {    border: 2px solid;    border-radius: 5px;    width: 200px;    height: 200px;    padding-left: 20px;    padding-right: 20px;    /*margin: auto;*/    margin: 20px 20px 20px 20px;    transition: 0.4s;    display: inline-block;    text-align: left;}我是网络开发的初学者。让我知道你的想法。任何帮助深表感谢！附加 HTML：<main>    <div id="items">                                <br/>        <div class="food-item">        <h4> Fries - 2.49 </h4>        <p> Crispy fresh-cut fries with a side of ketchup. </p>        </div>                                    <div class="food-item">        <h4> Hot Dog - 3.49 </h4>        <p> Classic American hot dog with mustard, ketchup, and relish on a toasted bun. </p>        </div>                                    <div class="food-item">        <h4> Hamburger - 3.99 </h4>        <p> A juicy hamburger patty grilled and served on a fresh bun with mustard and ketchup. </p>        </div>                                    <div class="food-item">        <h4> Buffalo Chicken Wrap - 3.99 </h4>        <p> Crispy buffalo chicken wrapped in a flour tortilla with lettuce and ranch dressing. </p>        </div>       

Answer 1

您可以简单地使用flex-box将其应用到父 div 上的位置，并且您的元素将看起来响应式，只需以下代码片段

例子

main {

  margin-top: 50px;

  margin-bottom: 50px;

}

#items {

  display: flex;

  flex-wrap: wrap;

  text-align: center;

}

.food-item {

  border: 2px solid;

  border-radius: 5px;

  width: 150px;

  height: 150px;

  margin: 5px;

  padding-left: 20px;

  padding-right: 20px;

  /*margin: auto;*/

  transition: 0.4s;

  display: inline-block;

  text-align: left;

}

<main>

  <div id="items">

    <br/>

    <div class="food-item">

      <h4> Fries - 2.49 </h4>

      <p> Crispy fresh-cut fries with a side of ketchup. </p>

    </div>

    <div class="food-item">

      <h4> Hot Dog - 3.49 </h4>

      <p> Classic American hot dog with mustard, ketchup, and relish on a toasted bun. </p>

    </div>

    <div class="food-item">

      <h4> Hamburger - 3.99 </h4>

      <p> A juicy hamburger patty grilled and served on a fresh bun with mustard and ketchup. </p>

    </div>

    <div class="food-item">

      <h4> Buffalo Chicken Wrap - 3.99 </h4>

      <p> Crispy buffalo chicken wrapped in a flour tortilla with lettuce and ranch dressing. </p>

    </div>

    <br/>

    <div class="food-item">

      <h4> Caesar Salad - 3.49 </h4>

      <p> Fresh romaine lettuce served with Caesar salad dressing, croutons, and parmesean cheese. </p>

    </div>

    <div class="food-item">

      <h4> Mac and Cheese - 2.49 </h4>

      <p> A sharp three cheese blend served over macaroni and topped with bread crumbs. </p>

    </div>

  </div>

</main>