我需要在图像旁边放置文本，并将它们从上到下堆叠答案

【问题标题】：I need to place text next to image, and stack them from top to bottom我需要在图像旁边放置文本，并将它们从上到下堆叠
【发布时间】：2020-03-20 17:35:43
【问题描述】：

我有一个城市登陆页面，在主图下方我想要一张带浮动的图片：对；旁边是文本。在此之下，我想拥有相同的内容，但这次我使用了float: left;，但图片并没有将自己定位在第一个之下。它们位于带有 display: block; 的单独 DIV-s 中；

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

【问题讨论】：

标签： html css responsive-design responsive-images

【解决方案1】：

首先，当你使用float时，你需要在Parent中添加隐藏的溢出。

float CSS 属性将元素放置在其容器的左侧或右侧，允许文本和内联元素环绕它。该元素已从页面的正常流程中移除，但仍保留为流程的一部分（与绝对定位相反）。

所以你必须添加溢出：隐藏； CSS，请在下面查看，因为我为此创建了一个示例。

我在评论中添加了一个链接以便更好地理解。

【讨论】：