Question

所以我试图在一个Div中浮动三个图像。第一个位于左上角，它似乎没有引起任何问题，但我只是设法让文本环绕第二个图像（应该在中间右侧）所讨论的div是“TB2”div。如果有人能帮助我，我会很感激。 https://jsfiddle.net/so9n5r4b/

这是我的HTML：

body {
  background-image: url("Vlootbackground.png");
  background-repeat: repeat-x;
}
h1 {
  position: relative;
  left: 20px;
  top: 5px;
}
ul {
  margin: 0 auto;
  width: 700px;
  position: relative;
  bottom: -120px;
  right: 71px;
  color: white;
  font-size: 13px;
}
li {
  display: inline;
  padding: 17px;
}
#Banner {
  background-image: url("Vlootheader.jpg");
  background-repeat: no-repeat;
  width: 800px;
  height: 269px;
  position: relative;
  top: -22px;
  left: 350px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.UH2 {
  position: relative;
  left: 20px;
  top: -20px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}
#TB2 {
  background-color: white;
  margin-top: -18px;
  width: 800px;
  height: 1000px;
  position: relative;
  left: 350px;
  top: -24px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}
h2 {
  position: relative;
  left: 20px;
  top: 10px;
}
.GSimage1 {
  float: left;
  position: relative;
  left: 20px;
  padding-right: 40px;
  margin-bottom: 20px;
}
.GSimage2 {
  float: left;
  position: relative;
  top: 490px;
  margin-bottom: -490px;
}
.GT1 {
  margin-left: 20px;
  font-size: 18px;
  margin-right: 20px;
}
.GT2 {
  margin-left: 20px;
  margin-right: 20px;
  font-size: 18px;
}

<!DOCTYPE html>
<html lang="nl">

<head>
  <link rel="stylesheet" type="text/css" href="GSstyle.css">
  <title>De vloot</title>
  <meta charset="UTF-8">
</head>

<body>
  <div id="Banner">
    <h1>Geschiedenis</h1>
    <p class="UH2">Uit de tijd dat Marco zijn Polo aan had</p>
    <ul>
      <li>Start</li>
      <li>Geschiedenis</li>
      <li>Kruisers</li>
      <li>Vliegdekschepen</li>
      <li>Onderzeeërs</li>
    </ul>
  </div>
  <div id="TB2">
    <h2>Er is niet veel veranderd.</h2>
    <img src="GSimage1.jpg" alt="Geschiedenis image 1" class="GSimage1">
    <img src="GSimage2.jpg" alt="Geschiedenis image 2" class="GSimage2">
    <p class="GT1">text</p>
  </div>
</body>

</html>

Answer 1

我不确定你的问题是什么。我已经更新了你的小提琴，将图像浮动到右边，文字环绕着它。如果您正在寻找，请告诉我：

https://jsfiddle.net/so9n5r4b/3/

.GSimage2{
  float: right;
    position:relative;
    left:20px;
    padding-right:40px;
    margin-bottom:20px;
}

我还建议像我在这个小提琴中那样添加你在其中拥有的每个段落<p>...</p>。

在div

1 个答案: