HTML/CSS报告布局需求：实现container与child-container左右排列

需求说明 #

我正在编写代码形式的报告，需要实现如下布局：定义了container和child-container两个CSS类，让child-container始终显示在container的右侧，两类容器内包含图片或文本内容。

原HTML代码 #

<div class="container">
    <h3>1. Map Visualisation</h3>
    <br>
    <p>The map displays the percentage of children with exactly one deprivation across various
    countries, the population of each country is also included.
    This visualisation offers a global overview, highlighting geographical patterns and
    pinpointing regions where this issue is most prevalent.
    Users can instantly grasp which countries are facing the most significant challenges and
    observe variations across different parts of the world.</p>
</div>
<div class="child-container">
    <h3>1. Percentage of children Suffering From Exactly One Deprivation</h3>
    <img src="images/placeholder.jpg" alt="Map of children suffering">
</div>
<div class="container">
    <h3>2. GDP per Capita - 1960</h3>
    <img src="images/placeholder.jpg" alt="Scatter Plot">
</div>
<div class="child-container">
    <h3>2. Scatter Plot: Time-changing Function</h3>
    <br>
    <p>The scatter plot that explores the correlation between a country's GDP per capita and the
    percentage of children suffering from exactly one deprivation.
    This visualisation not only illuminates the economic factors influencing child deprivation
    but also challenges assumptions about wealth and well-being.</p>
</div>

原CSS代码（存在定位问题） #

body {
padding-left: 20%;
padding-left: 20%;
}
.container img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}

.container {
float: left;
max-width: 40%;
display: inline-block;
}

.child-container {
display: inline-block;
float: right;
max-width: 40%;
text-align: left;
}
.child-container img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}

问题分析 #

原代码使用float定位导致布局混乱：

1. float元素脱离文档流，第二组的container会跑到第一组元素的下方错位
2. 重复设置padding-left，没有统一的父容器包裹每组左右元素，无法保证每组的布局独立性

解决方案：使用Flexbox重构布局 #

通过给每组内容添加父容器，并使用Flexbox实现稳定的左右排列：

修改后的HTML代码

<div class="content-row">
    <div class="container">
        <h3>1. Map Visualisation</h3>
        <br>
        <p>The map displays the percentage of children with exactly one deprivation across various
        countries, the population of each country is also included.
        This visualisation offers a global overview, highlighting geographical patterns and
        pinpointing regions where this issue is most prevalent.
        Users can instantly grasp which countries are facing the most significant challenges and
        observe variations across different parts of the world.</p>
    </div>
    <div class="child-container">
        <h3>1. Percentage of children Suffering From Exactly One Deprivation</h3>
        <img src="images/placeholder.jpg" alt="Map of children suffering">
    </div>
</div>
<div class="content-row">
    <div class="container">
        <h3>2. GDP per Capita - 1960</h3>
        <img src="images/placeholder.jpg" alt="Scatter Plot">
    </div>
    <div class="child-container">
        <h3>2. Scatter Plot: Time-changing Function</h3>
        <br>
        <p>The scatter plot that explores the correlation between a country's GDP per capita and the
        percentage of children suffering from exactly one deprivation.
        This visualisation not only illuminates the economic factors influencing child deprivation
        but also challenges assumptions about wealth and well-being.</p>
    </div>
</div>

修改后的CSS代码

body {
    padding: 0 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.content-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 2%;
}

.container, .child-container {
    width: 48%;
    box-sizing: border-box;
    padding: 0 10px;
}

.container img, .child-container img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 10px auto;
}

修改说明 #

1. 添加.content-row父容器，把每组container和child-container包裹起来，确保每组布局独立
2. 使用display: flex替代float，justify-content: space-between让左右元素自动分配空间，gap设置元素间距
3. 调整容器宽度为48%，配合box-sizing: border-box避免溢出
4. 优化body的padding和居中设置，让整体内容更规整
5. 统一图片的样式，减少重复代码

内容的提问来源于stack exchange，提问作者Darragh924