2つの画像をhtmlで並べる方法は？

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> 

は、残念ながら、おそらく画像が広すぎるので、それはまだ次の行に第2の画像を置きます。私はこれを避けたいです - どんなに広いものがあっても。これどうやってするの？

Answer 1

ちょうどあなたの場合の図では、画像の親コンテナにCSS display:flexを追加します。

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

Answer 2

ちょうど<span>タグを使用し、それらの間にスペースを入れないことをお勧めします。それらは並べて表示されます。

Answer 3

これは多くの方法で実現できます。 あなたは、あなたも、あなたのすべてのCSSを設定することができ、50％

であることを100％にグリッドシステムと設定された画像の幅、それを包むか、テーブルと各TDの設定幅を作成することができますフレキシボックス https://css-tricks.com/snippets/css/a-guide-to-flexbox/

を使用することができます画像はまったく同じサイズになります。

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/フィドルを作成しました。

フレックスボックスの使用を強く推奨します。フレックスボックスは、これらの種類の作業を行う「新しい方法」です。もちろん、テーブルを使用することもできますが、それは表のデータではありません。一般的な構造について

：

<div class="columns"> 
    <div class="columns__item"></div> 
    <div class="columns__item"></div> 
</div> 

各columns__item、50％の幅を有します。各columns__item内部で私は少しイメージ（と、それはそのコンテナの100％の幅を超えないことを確認しました）入れている：

<figure> 
    <img src="http://lorempixel.com/400/400/" /> 
    <figcaption>Image caption</figcaption> 
</figure> 

を、それが役に立てば幸い！

Answer 6

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

か、あなたは1行にかかわらず、コンテナのサイズで画像を保存しておきたい場合は：最高のあなたに合ったものは何でも

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

ピック;）