web-dev-qa-db-ja.com

HTMLで画像を横に並べる

キャプションと並んで3つの画像が必要です。現時点では、3つの画像が上から下に移動し、キャプションは中央ではなく左側にあります。キャプションを中央に並べて画像を並べて表示するにはどうすればよいですか？ありがとう。

<div class="image123">
    <img src="/images/tv.gif" height="200" width="200" style="float:left">
    <p>This is image 1</p>
    <img class="middle-img" src="/images/tv.gif"/ height="200" width="200">
    <p>This is image 2</p>
    <img src="/images/tv.gif"/ height="200" width="200">
    <p>This is image 3</p>
</div>
htmlcsshtml5css3alignment
14
user3809938

こんな感じ？

<div class="image123">
    <div class="imgContainer">
        <img src="/images/tv.gif" height="200" width="200"/>
        <p>This is image 1</p>
    </div>
    <div class="imgContainer">
        <img class="middle-img" src="/images/tv.gif"/ height="200" width="200"/>
        <p>This is image 2</p>
    </div>
    <div class="imgContainer">
         <img src="/images/tv.gif"/ height="200" width="200"/>
        <p>This is image 3</p>
    </div>
</div>

imgContainerスタイルとして

.imgContainer{
    float:left;
}

こちらもご覧ください jsfiddle 。

16
James

「真ん中のキャプション」が何を意味していたのかはよくわかりませんが、優れたdisplay:inline-blockを使用して、画像を並べて表示する1つのソリューションを次に示します。

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title></title>
  <style>
    div.container {
      display:inline-block;
    }

    p {
      text-align:center;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="http://placehold.it/350x150" height="200" width="200" />
    <p>This is image 1</p>
  </div>
  <div class="container">
    <img class="middle-img" src="http://placehold.it/350x150"/ height="200" width="200" />
    <p>This is image 2</p>
  </div>
  <div class="container">
    <img src="http://placehold.it/350x150" height="200" width="200" />
    <p>This is image 3</p>
  </div>
</div>
</body>
</html>
6
Pierre-Adrien Buisson

この形式を使用してみてください

<figure>
   <img src="img" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

これにより、実際のキャプションが表示されます（他の人が推奨するようにFloat:leftを使用して2番目と3番目のimgを追加するだけです）

2
DarkNinja955

this を試してください。

[〜＃〜] css [〜＃〜]

.imageContainer {
    float: left;
}

p {
    text-align: center;
}

[〜＃〜] html [〜＃〜]

<div class="image123">
    <div class="imageContainer">
        <img src="/images/tv.gif" height="200" width="200" />
        <p>This is image 1</p>
    </div>
    <div class="imageContainer">
        <img class="middle-img" src="/images/tv.gif"/ height="200" width="200" />
        <p>This is image 2</p>
    </div>
    <div class="imageContainer">    
        <img src="/images/tv.gif"/ height="200" width="200"/>
        <p>This is image 3</p>
    </div>
</div>
1
Michael Bellamy

ここに私がそれをする方法があります（ただし、このプロジェクトとその他すべてに外部スタイルシートを使用します。作業を簡単にするだけです。この例はhtml5でも使用できます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
  .container {
      display:inline-block;
  }
</style>
</head>
<body>

  <div class="container">
    <figure>
    <img src="http://placehold.it/350x150" height="200" width="200">
    <figcaption>This is image 1</figcaption>
    </figure>

    <figure>
    <img class="middle-img" src="http://placehold.it/350x150"/ height="200" width="200">
    <figcaption>This is image 2</figcaption>
    </figure>

    <figure>
    <img src="http://placehold.it/350x150" height="200" width="200">
    <figcaption>This is image 3</figcaption>
    </figure>

  </div>
</body>
</html>
0
Paydros

次のように、各imgpにコンテナを使用することをお勧めします。

<div class="image123">
    <div style="float:left;margin-right:5px;">
        <img src="/images/tv.gif" height="200" width="200"  />
        <p style="text-align:center;">This is image 1</p>
    </div>
    <div style="float:left;margin-right:5px;">
        <img class="middle-img" src="/images/tv.gif/" height="200" width="200" />
        <p style="text-align:center;">This is image 2</p>
    </div>
    <div style="float:left;margin-right:5px;">
        <img src="/images/tv.gif/" height="200" width="200" />
        <p style="text-align:center;">This is image 3</p>
    </div>
</div>

その後、float:left各コンテナに。追加して5pxmargin rightそのため、各画像間にスペースがあります。また、常に要素を閉じます。おそらくhtml imgタグでは閉じることは重要ではありませんが、XHTMLでは重要です。

フィドル

また、フレンドリーなアドバイス。可能な限りインラインスタイルを避けるようにしてください。ここを見てください：

html

<div class="image123">
    <div>
        <img src="/images/tv.gif" />
        <p>This is image 1</p>
    </div>
    <div>
        <img class="middle-img" src="/images/tv.gif/" />
        <p>This is image 2</p>
    </div>
    <div>
        <img src="/images/tv.gif/" />
        <p>This is image 3</p>
    </div>
</div>

css

div{
    float:left;
    margin-right:5px;
}

div > img{
   height:200px;
    width:200px;
}

p{
    text-align:center;
}

通常、リンクされたスタイルシートを使用することをお勧めします。

  • ブラウザはパフォーマンスのためにキャッシュできます
  • 一般的に、開発の観点からはメンテナンスがはるかに簡単です

ソース

フィドル

0
Alex Char