У меня есть целевая страница города, под основным изображением я хочу иметь одну фотографию с плавающей точкой: справа; и рядом с этим текст. Ниже я хочу иметь тот же контент, но на этот раз я использовал float: left;, но картинка не позиционировалась ниже первого. Они находятся в отдельных DIV-ов с дисплеем: блок;
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;
}