我有一个城市着陆页，在主图像下面，我想要一张带浮标的图片：对；旁边是文本。在此之下，我希望具有相同的内容，但是这次我使用了float: left;，但图片并未将其自身定位在第一个图片的下方。它们在单独的DIV中，显示为：block;
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/main-style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
<title>Moskva</title>
</head>
<body>
<!-- Header start -->
<header>
<div class="container">
<h1>Moskva</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel interdum purus. Nulla semper nisi vel volutpat tristique.</p>
</div>
<div class="container">
<nav>
<ul>
<li><a href="index.html">Naslovnica</a></li>
<li><a href="#">Galerija</a></li>
</ul>
</nav>
</div>
</header>
<!-- Header end -->
<!-- About city -->
<section id="opis">
<div class="container">
<div class="box">
<h3>Lorem Ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel interdum purus. Nulla semper nisi vel volutpat tristique. Fusce eget quam sit amet dui consequat fermentum. Morbi dictum efficitur lorem a aliquam. Nam dapibus, lorem vel molestie tincidunt, urna ipsum vehicula sem, in vehicula dolor dui vel massa. Fusce a tortor est. Maecenas nec congue diam. Ut et ornare urna, id feugiat ex.Donec ac vehicula dolor, quis placerat arcu. Nam laoreet enim in varius tristique. Vestibulum feugiat sed nisl ac vestibulum. Cras quis pellentesque quam, eu sollicitudin enim. Curabitur massa elit, tempor vel leo in, laoreet placerat sem.
</p>
</div>
<hr>
<!-- Image-Text sections -->
<!-- Kremlin -->
<div class="box">
<h3>Kremlin</h3>
<img src="../images/kremlin-pic.jpg" alt="kremlin" class="right-img">
<br> <br>
<p>Najprepoznatljivija struktura Moskve bez sumnje je Kremlj, utvrđeni kompleks iz 15. stoljeća koji pokriva površinu od 275.000 četvornih metara okružen zidinama izgrađenim 1400-ih. Palača Grand Kremlj - koja ima preko 700 soba - nekad je bila obitelj kralja i sada je službeno prebivalište predsjednika Ruske Federacije, iako većina šefova država odlučuje prebivati negdje drugdje.</p>
</div>
<!-- Kremlin End -->
<!-- Bolshoi Theatre Start -->
<div class="box">
<h3>Bolshoi Theatre</h3>
<img src="../images/bolshoi-theatre.jpg" class="left-img">
</div>
<!-- Bolshoi Theatre End -->
</section>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
background-color: #f4f4f4;
}
/* Global container */
.container {
width: 80%;
margin: auto;
overflow: hidden;
text-align: center;
}
.box {
text-align: center;
display: block;
}
/* Header section */
header {
text-align: center;
padding-top: 30px;
background: url(../images/background.jpg) no-repeat;
min-height: 690px;
}
header h1 {
font-size: 95px;
font-weight: bold;
color: white;
font-family: 'Dancing Script', cursive;
}
header p {
color: white;
}
nav {
margin-top: 4%;
}
/* Anchor tags section */
header a {
color: white;
text-decoration: none;
font-size: 24px;
transition: linear .2s;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Anchor tags section end */
header li {
display: inline;
padding: 0px 40px 0px 20px;
}
/* Header section END */
/* Image-Text section */
h3 {
font-size: 28px;
font-family: 'Dancing Script', cursive;
}
/* Image float - RL */
.right-img {
float: right;
}
.left-img {
float: left;
}
首先，当您使用float时，您需要添加隐藏在Parent中的溢出。
float CSS属性将元素放置在其容器的左侧或右侧，从而允许文本和行内元素环绕在其周围。从页面的常规流程中删除了该元素，尽管仍然保留了一部分流程（与绝对定位相反）。
所以您必须添加溢出：隐藏； CSS，请在下面查看，因为我为此创建了一个示例。
为了便于理解，我在评论中添加了一个链接。