包装不能正确显示内容

我的网站有点问题，我必须完成一个学校项目。我已经在包装器中获得了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

包装不能正确显示内容

回答

相关问题