gpt4 book ai didi

html - div 中图像下方的文本

转载 作者:行者123 更新时间:2023-11-28 16:02:25 25 4
gpt4 key购买 nike

所以我想在一个 Div 中 float 三个图像。第一个位于左上角,它似乎没有引起任何问题,但我无法设法让文本环绕第二个图像(应该在右中)有问题的 div是“TB2”分区。如果有人能帮助我,我将不胜感激。 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>

最佳答案

我不确定你的问题是什么。我已经更新了你的 fiddle ,使图像向右浮动,文字环绕在它周围。让我知道这是否是您要找的:

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

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

我还建议添加您自己的每个段落 <p>...</p>正如我在这个 fiddle 中所做的那样。

关于html - div 中图像下方的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39855916/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com