如何排队css盒？

Question

我一直在破坏我的屁股，只是为了在css框中排列我的照片 这里是刀片（laravel5）中的代码（以及结果的屏幕商店）：

这是我的代码：

@foreach($users as $user)
        <div style="width: 200px;height: 200px;background-color: gray;text-align: center; float: right; margin-bottom: 22px;
                    margin-right: 17px;
         ">
            <a href="{{route('users.profile',$user->username)}}"><img src="{{$user->getavatar()}}" alt="{!!$user->username!!}" ></a>
            <strong>{!!$user->username!!}</strong>
        </div>
        <br>
 @endforeach

Answer 1

让我们尝试使用display而不是使用float的其他方法，并删除<br>。这看起来怎么样？

<div style="width: 200px; height: 200px; text-align: center; display: inline-block; vertical-align: top; margin: 0 10px 22px;">
    <a href="{{route('users.profile',$user->username)}}"><img src="{{$user->getavatar()}}" alt="{!!$user->username!!}" ></a>
    <strong>{!!$user->username!!}</strong>
</div>

Answer 2

您可以将所有foreach loop divs放入div容器中并使用display:flex。最好不要使用内联你的html代码的css（看起来很重），那里也不需要<br>。 请查看以下内容：

#container {
  display: flex;
  flex-wrap: wrap;
  padding: 50px;
}
#container div {
  height: 200px;
  width: 200px;   /*or using calc(100% / 6);*/
  background-color: gray;
  text-align: center;
  flex-grow: 0;  
  margin-bottom: 22px;
  margin-right: 17px;
}

<div id="container">
  <!--sample result of your foreach loop-->
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <!--end foreach-->
</div>

Answer 3

删除<br>循环末尾的foreach标记。