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>

我想把这些数字放在一起，以便它们并排。我试图让第一个漂浮：左边和第二个漂浮：对，但它没有帮助。任何人都可以帮助我吗？

Answer 1

由于Traceback (most recent call last): File "<pyshell#5>", line 1, in <module> import vlc File "c:\python27\python-vlc-1.1.2\vlc.py", line 173, in <module> dll, plugin_path = find_lib() File "c:\python27\python-vlc-1.1.2\vlc.py", line 150, in find_lib dll = ctypes.CDLL('libvlc.dll') File "C:\Python27\lib\ctypes\__init__.py", line 353, in __init__ self._handle = _dlopen(self._name, mode) WindowsError: [Error 126] The specified module could not be found是块级元素，因此添加此CSS规则并使其内联，如果有足够的空间，它将并排显示。

figure

示例代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

而不是浮动尝试使用对齐，这可能有用。您还可以使用表格并将图像放在一行中，但只能放在两列中。

Answer 3

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

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

如何并排数字（浮动）

4 个答案: