Question

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

Answer 1

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

在此处阅读更多内容：https://css-tricks.com/almanac/properties/f/flex-flow/

＆＃13;

.wrapper{
  display: flex;
  flex-flow: row wrap;
}

.box{
  background: silver;
  margin:2px;
  height: auto;
  width: 300px;
}

＆＃13;

<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
	</div>
  <div class='box'>name:zzzz
    <br> inforamtion: xxxx
    <br> <img src="https://dummyimage.com/300x100/000/fff" style="width:300px">
    <br> price:111111
	</div>
  <div class='box'>name:zzzz
    <br> inforamtion: xxxx
    <br> <img src="https://dummyimage.com/300x100/000/fff" style="width:300px">
    <br> price:111111
	</div>
  <div class='box'>name:zzzz
    <br> inforamtion: xxxx
    <br> <img src="https://dummyimage.com/300x100/000/fff" style="width:300px">
    <br> price:111111
	</div>
</section>

＆＃13;

包装器无法正确显示内联内容

1 个答案: