html div 循环时未关闭

Question

I need to show my posts from the database in a certain view but I am getting something else.

The outcome I need:

The outcome I get:

myhtml

 @foreach($posts as $post) <div class="round-post"> <img src="/storage/{{$post->image}}" id = "img-posts" alt=""> <div class="caption"> <div class="model"> S20 Plus </div> <div class="price"> k400 </div> <div class="company- name"> <ul id = org-name-ul> <li class="fix-li"> bocxdddddddddddddddddddd</li> </ul> </div> <div class="company-logo"> <img src="images/brand-img/sm-logo.png" id = "brand-logo" alt=""> </div> <div class="below-img"> <img src="images/brand-img/sm-logo.png" id = "brand-logo" alt=""> <img src="images/cat-logo/phone-logo3.png" id = "cat-logo" alt=""> </div> <hr> <div class="round- details"> <ul> <li> <div class="info-list"> Storage: 8GB</div> </li> <li> <div class="info-list">Ram: 1GB</div> </li> <li> <div class="info-list">Fault: chargin pressure </div> </li> </ul> @endforeach

Answer 1

You can use bootstrap for styling. If you can use bootstrap then use card -

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

In your case -

 @foreach($posts as $post)
    <div class="round-post card">
        <img src="/storage/{{$post->image}}" id = "img-posts" alt="" class="card-img-top">
        <div class="card-body">
            <div class="caption">
                <div class="model">  S20 Plus </div>
                <div class="price"> k400 </div>
                <div class="company- name">        
                    <ul id = org-name-ul>
                        <li class="fix-li"> bocxdddddddddddddddddddd</li>
                    </ul> 
                </div>
                <div class="company-logo">
                    <img src="images/brand-img/sm-logo.png" id = "brand-logo" alt="">    
                </div>
                <div class="below-img">
                    <img src="images/brand-img/sm-logo.png" id = "brand-logo" alt="">
                    <img src="images/cat-logo/phone-logo3.png" id  = "cat-logo" alt="">
                </div>
                <hr> 
                <div class="round- details">
                    <ul>
                        <li>  
                            <div class="info-list"> Storage: 8GB</div> 
                        </li>
                        <li> 
                            <div  class="info-list">Ram: 1GB</div> 
                        </li>
                        <li>  
                            <div  class="info-list">Fault: chargin pressure </div>  
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endforeach

Also, there are few <div> , they have no closing tag. Please beautify your code for better understanding and readability.

Thanks.

Answer 2

You are not closing the opening with the round-post class and so each following post is being nested inside the former - creating the effect you see.

Your browser is smart enough to make up for the lack of closing tags, which is sometimes a gift and a curse!

I would also suggest that you look into properly formatting your HTML - perhaps it was just how it carried over to SO, but properly formatted HTML in your editor can help you spot mistakes like this much more easily!