What am I doing wrong here ? html and css

Question

Okay here is the desired result:

Here is the result I got:

The bottom row is in a straight line and not going in between the other containers like it need it be to be. I don't know how to go about getting the results I want like in the screenshot #1.

I hope someone can help me out. Thanks in advance.

 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-size: 14px; background-color: #f2f2f2; font-family: 'Roboto', sans-serif; } h2 { font-size: 22px; font-weight: 300; padding-top: 7px; } .container { width: 948px; height: auto; margin: 0 auto; overflow: hidden; padding-top: 70px; padding-bottom: 50px; } .container ul { width: 100%; height: auto; list-style-type: none; } .container ul li { float: left; width: 300px; height: auto; padding: 10px; margin-right: 24px; border-radius: 6px; display: inline-block; background-color: #fff; } .container ul li:nth-child(3n) { margin: 0; } .container ul li span { font-size: 13px; padding-bottom: 7px; text-decoration: underline; } .container ul li p { color: #333; text-align: justify; padding-bottom: 15px; } .thumbnail-con { width: 100%; height: 174px; border-radius: 3px; background-color: #f2f2f2; }

 <!DOCTYPE html> <html> <head> <title>SimpleRead</title> <link rel="stylesheet" type="text/css"href="styles/main.css"> </head> <body> <div class="container"> <ul> <li> <div class="thumbnail-con"></div> <br> <span>Business</span> <h2>Caterpillar to close Illinois plant, lay off 800 workers</h2> <br> </li> <li> <div class="thumbnail-con"></div> <br> <span>Celebrity</span> <h2>Nicki Minaj signs with modeling agency</h2> <br> <p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p> </li> <li> <div class="thumbnail-con"></div> <br> <span>US</span> <h2>Racist 'assassin' indicted as terrorist in NYC murder of black man</h2> <br> <p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p> </li> <li> <div class="thumbnail-con"></div> <br> <span>US</span> <h2>Racist 'assassin' indicted as terrorist in NYC murder of black man</h2> <br> <p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p> </li> <li> <div class="thumbnail-con"></div> <br> <span>US</span> <h2>Racist 'assassin' indicted as terrorist in NYC murder of black man</h2> <br> <p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p> </li> <li> <div class="thumbnail-con"></div> <br> <span>US</span> <h2>Racist 'assassin' indicted as terrorist in NYC murder of black man</h2> <br> <p>Prosecutors charged a white Baltimore racist Monday with murder as an act of terrorism for traveling to New York City and allegedly killing a 66-year-old black man with a sword.</p> </li> </ul> </div> </body> </html>

Answer 1

That layout is called the Masonry Grid . It can be achieved using CSS grid columns but it is quite a muddled task, i would recommend that you use a jQuery plugin like this one .

Hope this helps :)

What am I doing wrong here ? html and css

Question

1 answers

solution1
0 2017-04-02 17:03:15

What am I doing wrong here ? html and css

Question

1 answers

solution1 0 2017-04-02 17:03:15

solution1
0 2017-04-02 17:03:15