Question

我有几个问题：

如何将第二张图片移动到另一张图片下方且间隙很小？

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

<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">
    <img class="nrl-image" src="img/dvw.jpg">
    <h2> Can St George Illawarra Dragons keep their place on top of the ladder?</h2>
    <p1> 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. </p1>
  </div>
  <div>
    <img class="world-cup" src="img/wcf.jpg" />
  </div>
</body>

当您浏览该网站时，所有内容都会被混淆在底部，因为图片汇聚在一起，并弄乱了该网站。

相反，我想将第二张图片移到第一张图片下方，并留出很小的空隙。

Answer 1

您可以在下面的图像容器上使用JSON和clear: both强制下面的其他内容，并在它们之间加一个空格

margin-top

如何将第二张图片移到另一张图片下方且间隙很小？

1 个答案: