如何并排放置数字（浮动）

Question

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

我想把这些数字并排放置。我尝试制作第一个 float:left 和第二个 float:right，但没有帮助。谁能帮帮我？

Answer 1

尝试使用对齐代替浮动，这可能会奏效。您还可以使用 table 并将图像放在一行但两列中。

Answer 2

由于figure是一个块级元素，添加这个CSS规则并使其内联，如果有足够的space，它将并排。

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

示例片段

.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>

Answer 3

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

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

Answer 4

尝试将 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方法。

如何并排放置数字（浮动）

how to put figures side by side (float)

html

css

figure