如何并排放置数字（浮点数）答案

【问题标题】：how to put figures side by side (float)如何并排放置数字（浮点数）
【发布时间】：2023-03-03 15:15:01
【问题描述】：

<figure class="left">
<img class="top" src="top10.jpg" width="400" height="300"/>
<figcaption> Fig1. Production value and quantity of the 10 top commodities </figcaption>
</figure>

<figure class="right">
<img class="average" src="average.jpg" width="400" height="300"/>
<figcaption> Fig2. Averages per metric ton </figcaption>
</figure>

我想把这些数字并排放置。我试图让第一个浮动：左和第二个浮动：右，但它没有帮助。谁能帮帮我？

【问题讨论】：

标签： css html figure

【解决方案1】：

由于figure是块级元素，所以添加这条CSS规则并使其内联，如果空间足够，它将并排。

.left, .right {
  display: inline-block;
}

示例 sn-p

.left, .right {
  display: inline-block;
}

<figure class="left">
  <img class="top" src="top10.jpg" width="400" height="300"/>
  <figcaption> Fig1. Production value and quantity of the 10 top commodities </figcaption>
</figure>

<figure class="right">
  <img class="average" src="average.jpg" width="400" height="300"/>
  <figcaption> Fig2. Averages per metric ton </figcaption>
</figure>

【讨论】：

【解决方案2】：

尝试将float: left 应用于这两个数字。

此外，这种方法可能很有用：

<style>
.line{  /* Describes only positioning behaviour */
    display: block; /* Not important, but helpful in this case */
    clear: both;    /* Not important, but helpful in this case */
}

.line__figure{ /* Describes only positioning behaviour */
    float:left;
}

.figure{ /* Describes only view representation. */
    display: block; /* Not important, but helpful in this case */
}

.figure__image{
    background: lightgray;
    width: 400px;
    height: 300px;
}
</style>
<article>
    <section class='line'>
        <figure class="line__figure figure">
            <img class="figure__image top" src="top10.jpg" />
            <figcaption>Fig1. Production value and quantity
            of the 10 top commodities</figcaption>
        </figure>
        <figure class="line__figure figure">
            <img class="figure__image average" src="average.jpg" />
            <figcaption>Fig2. Averages per metric ton</figcaption>
        </figure>
    </section>
    <section class='line'>
    Some text
    </section>
</article>

想法：

划分流程行为和视觉表示逻辑。
使用Block, Element, Modifier 方法。

【讨论】：

【解决方案3】：

尝试使用对齐而不是浮动，这可能会起作用。您还可以使用表格，将图片放在一行中，但在两列中。

【讨论】：

【解决方案4】：

父元素需要有足够的宽度左右浮动

<div style="width:1000px">
    <figure class="left" style="float:left">
    <img class="top" src="top10.jpg" width="400" height="300"/>
    <figcaption> Fig1. Production value and quantity of the 10 top commodities </figcaption>
    </figure>

    <figure class="right" style="float:right">
    <img class="average" src="average.jpg" width="400" height="300"/>
    <figcaption> Fig2. Averages per metric ton </figcaption>
    </figure>
</div>

【讨论】：