Html 如何将第二张图片移动到另一张图片下方的小间隙处？_Html_Css

Html 如何将第二张图片移动到另一张图片下方的小间隙处？

html css

Html 如何将第二张图片移动到另一张图片下方的小间隙处？,html,css,Html,Css,我有几个问题：如何将第二张图片移动到另一张图片下方的小间隙处 html，身体{ 背景色：#ffffff；保证金：0；填充：0；字体系列：无衬线； } 分区集装箱{ 保证金：0；填充：0 30px； } 标题{ 背景色：#000000；浮动：左；宽度：100%； } 收割台h1{ 颜色：#ffffff；文本转换：大写；浮动：左；字体大小：50px； } .标志{ 利润率：10px 50px；高度：120px；浮动：左； } .导航{ 浮动：对；列表样式类型：无；列表

我有几个问题：

如何将第二张图片移动到另一张图片下方的小间隙处

html，
身体{
背景色：#ffffff；
保证金：0；
填充：0；
字体系列：无衬线；
}
分区集装箱{
保证金：0；
填充：0 30px；
}
标题{
背景色：#000000；
浮动：左；
宽度：100%；
}
收割台h1{
颜色：#ffffff；
文本转换：大写；
浮动：左；
字体大小：50px；
}
.标志{
利润率：10px 50px；
高度：120px；
浮动：左；
}
.导航{
浮动：对；
列表样式类型：无；
列表样式：无；
填充：10px 100px；
利润率：20px；
}
李国荣先生{
显示：内联块；
利润率：10px 5px；
}
ul.nav李安{
颜色：#ffffff；
文本转换：大写；
文字装饰：无；
字体大小：20px；
字体系列：“Roboto”，无衬线；
页边距底部：继承；
填充物：5px10px；
字母间距：2px；
边框：1px实心#ffffff；
}
李娜：悬停{
背景：#fff；
过渡：.4s；
颜色：#000000
}
李海军{
边框：2倍纯白；
背景：#ffffff；
颜色：#000；
}
.横幅图像{
宽度：100%；
}
.身体{
边框：1px纯黑；
背景：#000000；
颜色：#ffffff；
字体大小：20px；
}
.nrl图像{
浮动：左；
}


GWS新闻-主页
草地世界体育新闻







最新体育新闻
圣乔治·伊拉瓦拉龙能保持他们在梯子顶端的位置吗？
Robbie Farah以一场赢得比赛的表演震惊了所有的龙队，这导致龙队在主场首度失利。老虎队的这场胜利使他们能够保持在前8名，并有可能赢得决赛。

您可以在下面的图像容器上使用

清除：和页边距顶部
，以强制下面的其他内容，并在它们之间留出间隙，就像这样
<style>

html,body{
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

div.container{
    margin: 0;
    padding: 0 30px;
}

header{
    background-color: #000000;
    float: left;
    width: 100%;
}

header h1{
    color: #ffffff;
    text-transform: uppercase;
    float: left;
    font-size: 50px;
 }

.logo{
    margin: 10px 50px;
    height: 120px;
    float: left;
}

.nav {
    float: right;
    list-style-type: none;
    list-style: none;
    padding: 10px 100px;
    margin: 20px;
}

.nav li {
    display: inline-block;
    margin: 10px 5px;
}

ul.nav li a{
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 20px;
    font-family: "Roboto", sans-serif;
    margin-bottom: inherit;
    padding: 5px 10px;
    letter-spacing: 2px;
    border: 1px solid #ffffff;

}

.nav li a:hover{
    background: #fff;
    transition: .4s;
    color: #000000
}

.nav li.active a{
    border: 2px solid white;
    background: #ffffff;
    color: #000;
}

.banner-image {
width: 100%;
}

.body{
    border: 1px solid black;
    background: #000000;
    color: #ffffff;
    font-size: 20px;
}

.nrl-image{
    float: left;
}

.pic{
  clear: both;
}

</style>

<html>
    <head>
        <title> GWS News- Home</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    </head>

    <body>
        <header>
            <div class="container">
                <h1> Grass World Sport News</h1>
                <img src=img/logo.jpg class="logo">
                <ul class="nav">
                    <li class="active"><a href="file:///Users/rarichenjoseph/Desktop/GWS%202/Website.html">Home</a></li>
                    <li><a href="#">World Cup</a>    </li>
                    <li><a href="#">Sports</a></li>
                    <li><a href="#">Schedule</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
            <div class="banner">
                <img class="banner-image" src=img/banner1.jpeg>
            </div>
        </header>
        <div class="body">
            <h1> Latest Sport News</h1>
        </div>
        <div class="pics">
            <div class="nrl-image">
            <img  src="../../../xampp/htdocs/sef/images/avarta2.jpg" />
            </div>
            <div>
            <h2> Can St George Illawarra Dragons keep their place on top of the ladder?</h2>
            <p> Robbie Farah stuns all of Dragons with a match-winning performance that leads to Dragons first loss at their home ground. This win for the Tigers allow them to stay in top 8 and possibly have a chance to win the finals. </p>
            </div>
        </div>
        <div style="clear: both;"></div>
        <div style="margin-top:20px">
            <img class="world-cup" src="../../../xampp/htdocs/sef/images/avarta2.jpg" />
        </div>
    </body>
    </html>


html，正文{
背景色：#ffffff；
保证金：0；
填充：0；
字体系列：无衬线；
}
分区集装箱{
保证金：0；
填充：0 30px；
}
标题{
背景色：#000000；
浮动：左；
宽度：100%；
}
收割台h1{
颜色：#ffffff；
文本转换：大写；
浮动：左；
字体大小：50px；
}
.标志{
利润率：10px 50px；
高度：120px；
浮动：左；
}
.导航{
浮动：对；
列表样式类型：无；
列表样式：无；
填充：10px 100px；
利润率：20px；
}
李国荣先生{
显示：内联块；
利润率：10px 5px；
}
ul.nav李安{
颜色：#ffffff；
文本转换：大写；
文字装饰：无；
字体大小：20px；
字体系列：“Roboto”，无衬线；
页边距底部：继承；
填充物：5px10px；
字母间距：2px；
边框：1px实心#ffffff；
}
李娜：悬停{
背景：#fff；
过渡：.4s；
颜色：#000000
}
李海军{
边框：2倍纯白；
背景：#ffffff；
颜色：#000；
}
.横幅图像{
宽度：100%；
}
.身体{
边框：1px纯黑；
背景：#000000；
颜色：#ffffff；
字体大小：20px；
}
.nrl图像{
浮动：左；
}
图{
明确：两者皆有；
}
GWS新闻-主页
草地世界体育新闻







最新体育新闻
圣乔治·伊拉瓦拉龙能保持他们在梯子顶端的位置吗？
Robbie Farah以一场赢得比赛的表演震惊了所有的龙队，这导致龙队在主场首度失利。老虎队的这场胜利使他们能够保持在前8名，并有可能赢得决赛