包裝不能正確顯示內容

我的網站有點問題，我必須完成一個學校項目。我已經在包裝器中獲得了PHP代碼，我試圖展示它現在內聯的女巫，但內容變得更小，並且不會真正堆疊。包裝中的內容重複並且應該彼此相鄰，直到沒有剩餘空間，然後它應該在第一個下面。我希望你明白我的意思:)。任何幫助將非常感激。包裝不能正確顯示內容

HTML

<section class="wrapper"> 
<?php 
    foreach ($armbond as $entry) 
    { 
    echo "<div class='box'> " . "name: " . $entry[0] . "." . " " . "<br> inforamtion: " . $entry[2] . "." . '<br> <img src="' . $entry[1] . '" style="width:304p"' .'">'. " " . "<br> price: " . $entry[3] . "</div> "; 
    } 
?> 
</section>`

CSS

.wrapper{ 
    display: flex; 
    flex-flow: row-wrap; 
} 

.box{ 
    background: silver; 
    margin:2px; 
    height: 150px; 
    width: 300px; 
}`

來源

2017-05-06 Hawkman110

告訴我們問題的渲染HTML –

難道這是一部分？ 'style =「width：304p」'在那裏缺少'x'。 – Halcyon

另外'inforamtion'應該可能是'information'。 – Halcyon

使用flex-flow: row wrap;沒有row-wrap。

在這裏閱讀更多：https://css-tricks.com/almanac/properties/f/flex-flow/

.wrapper{ 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.box{ 
 
    background: silver; 
 
    margin:2px; 
 
    height: auto; 
 
    width: 300px; 
 
}

<section class="wrapper"> 
 
    <div class='box'>name:zzzz 
 
    <br> inforamtion: xxxx 
 
    <br> <img src="https://dummyimage.com/300x100/000/fff" style="width:300px"> 
 
    <br> price:111111 
 
\t </div> 
 
    <div class='box'>name:zzzz 
 
    <br> inforamtion: xxxx 
 
    <br> <img src="https://dummyimage.com/300x100/000/fff" style="width:300px"> 
 
    <br> price:111111 
 
\t </div> 
 
    <div class='box'>name:zzzz 
 
    <br> inforamtion: xxxx 
 
    <br> <img src="https://dummyimage.com/300x100/000/fff" style="width:300px"> 
 
    <br> price:111111 
 
\t </div> 
 
    <div class='box'>name:zzzz 
 
    <br> inforamtion: xxxx 
 
    <br> <img src="https://dummyimage.com/300x100/000/fff" style="width:300px"> 
 
    <br> price:111111 
 
\t </div> 
 
</section>

來源

2017-05-06 14:12:42

包裝不能正確顯示內容

回答

相關問題