Question

好的，这是理想的结果：

以下是我得到的结果：

底行是直线而不是像其需要的那样进入其他容器之间。我不知道如何在屏幕截图＃1中获得我想要的结果。

我希望有人可以帮助我。提前谢谢。

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Answer 1

该布局称为 Masonry Grid 。它可以使用CSS网格列来实现，但这是一个非常混乱的任务，我建议你使用像this one这样的jQuery插件。

希望这会有所帮助：）

我在这做错了什么？ HTML和CSS

1 个答案: