嵌套 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>