Question

这是我目前的代码：

<figure class="half">
    <img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
    <img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
    <figcaption>Caption describing these two images.</figcaption>
</figure>

不幸的是，可能因为图像太宽，它仍然将第二张图像放在下一行。我想避免这种情况 - 不管事情有多广泛。我怎样才能做到这一点？

Answer 1

只需将css display:flex添加到案例图中父图像的容器中即可。

＆＃13;

<figure class="half" style="display:flex">
    <img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
    <img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
    <figcaption>Caption describing these two images.</figcaption>
</figure>

＆＃13;

Answer 2

我建议只使用<span>标记，并在它们之间不留空格，然后它们就会并排。

Answer 3

这可以通过多种方式实现。你可以使用flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

您可以将其包裹网格系统并将图像宽度设置为100％，或者创建表格并将每个td的宽度设置为50％

您甚至可以将所有图像的css设置为完全相同的大小。

Answer 4

您可以将图像放入表格单元格中。

<figure class="half">
  <table>
    <tr>
      <td>
        <img style="width:400px;" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
      </td>
      <td>
        <img style="width:600px;" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
      </td>
    </tr>
  </table>
  <figcaption>Caption describing these two images.</figcaption>
</figure>

Answer 5

我为你创造了一个小小提琴https://jsfiddle.net/7kophdxq/。

我强烈建议使用flexbox，因为它的新方式是＆＃39;做这些事情。当然你可以使用表格，但它不是表格数据吗？

对于一般结构：

cpplint.py –extensions=h,c src/*

每个<div class="columns"> <div class="columns__item"></div> <div class="columns__item"></div> </div>的宽度为50％。在每个columns__item内，我放了一个小图片（并确保它的宽度不超过其容器的100％）：

columns__item

希望它有所帮助！

Answer 6

.half img {
   display:inline-block;
}
.half figcaption {
  display:block
}

或者，如果您想将图像保存在一行中，无论容器大小如何：

.half {
   white-space:nowrap;
}
.half img {
   display:inline;
}
.half figcaption {
  display:block
}

选择最适合你的东西;）

如何在html中并排放置2张图片？

6 个答案: