CODEWITHSUNDEEP
csshtml
Alireza Amrollahi
Alireza Amrollahi

Reputation: 1

how to lineup css boxes?

I have been busting my butt, just to lineup my pics in css boxes here is the code(and the screen shop of result) its in the blade(laravel5) :

enter image description here

Here is my code:

@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

Upvotes: 0

Views: 168

Answers (3)

RizkiDPrast
RizkiDPrast

Reputation: 1725

You can put all your foreach loop divs inside a div container and use display:flex. It is better not to use css inline with yout html code(It looks heavy), also <br> is not needed there. Please review this one:

#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>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

Remove the <br> tag at the end of the foreach loop.

Upvotes: 0

Jon Uleis
Jon Uleis

Reputation: 18649

Let's try another method using display instead of using float, and remove the <br>. How does this look?

<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>

Upvotes: 1

Related Questions