我正在開發一個從 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>
1 回答
有只小跳蛙
TA貢獻1824條經驗 獲得超8個贊
您可以簡單地使用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>
- 1 回答
- 0 關注
- 183 瀏覽
添加回答
舉報
0/150
提交
取消