画像を水平に表示する方法

画像を表示するために図形タグを使用しています。画像は縦に追加されます。私はディスプレイのインラインブロックとしてスタイルを持つdivを使ってみました。しかし、それは動作していないようです。私は何が欠けているのかわからない。それを水平に表示する方法に関するアイデア。
display: block;
必要なものとして表示されるようにそれらである -画像を水平に表示する方法

<style> 
figure { 
    display: block; 
    margin-top: 1em; 
    margin-bottom: 1em; 
    margin-left: 40px; 
    margin-right: 40px; 
} 
</style> 


<figure> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> 
</figure> 
<figure> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> 
</figure> 
<figure> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> 
</figure>

出典

2017-03-04 ləːnə

私は、インラインブロックが動作すると思いますが、あなたがしている場合はそのノートを取ります画面やウィンドウは、要素ができないほど小さくなります水平にフィットすると、垂直になります。 – Roljhon

あなたは簡単にいくつかの回答を見つけることができますし、それを行うには非常に多くの方法があります。 – Stickers

はい私はgoogleをして、インラインブロックが動作するかもしれないが、それは動作しないようです。その後、私は、上書きする私のページに他のスタイルがあることを理解しました。 –

は、あなたが行っていることは、あなたのCSSにブロックとして表示する画像を指定してある

figure { 
    display : inline-block; 
}

出典

2017-03-04 18:36:00 frederick99

は、このCSSを適用します。 インライン、

はあなたのこの編集したコードを試してみてください -

<html> 
<head> 
    <style> 
     figure { 
      display: inline-block; 
      margin-top: 1em; 
      margin-bottom: 1em; 
      margin-left: 40px; 
      margin-right: 40px; 
     } 
    </style> 
</head> 
<body> 
    <figure> 
     <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> 
    </figure> 
    <figure> 
     <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> 
    </figure> 
    <figure> 
     <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> 
    </figure> 
</body>

ここ

出典

2017-03-04 18:40:56

figure { 
 
    display: inline-block; 
 
    margin-top: 1em; 
 
    margin-bottom: 1em; 
 
    margin-left: 40px; 
 
    margin-right: 40px; 
 
} 
 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<figure> 
 
    <img src="http://www.jonathanjeter.com/images/Square_200x200.png" alt="The Pulpit Rock"> 
 
</figure> 
 
<figure> 
 
    <img src="http://www.jonathanjeter.com/images/Square_200x200.png" alt="The Pulpit Rock"> 
 
</figure> 
 
<figure> 
 
    <img src="http://www.jonathanjeter.com/images/Square_200x200.png" alt="The Pulpit Rock"> 
 
</figure> 
 
<figure> 
 
    <img src="http://www.jonathanjeter.com/images/Square_200x200.png" alt="The Pulpit Rock"> 
 
</figure> 
 
<figure> 
 
    <img src="http://www.jonathanjeter.com/images/Square_200x200.png" alt="The Pulpit Rock"> 
 
</figure>

出典

2017-03-04 19:47:31

レスポンシブウェブデザイン：

<style> 
.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% */ 
.grid_2 { width: 32.5%; } /* 260px/800px = 32.5% */ 
.grid_3 { width: 49.375%; } /* 395px/800px = 49.375% */ 
.grid_4 { width: 65.625%; } /* 525px/800px = 65.625% */ 
.grid_5 { width: 83.125%; } /* 665px/800px = 83.125% */ 
.grid_6 { width: 100%; } /* 800px/800px = 100% */ 

.grid_1, 
.grid_2, 
.grid_3, 
.grid_4, 
.grid_5, 
.grid_6 { 
    margin-right: 0; 
    float: left; 
    display: block; 
} 
</style> 

<figure class="grid_1"> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock"> 
</figure> 
<figure class="grid_1"> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock"> 
</figure> 
<figure class="grid_1"> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock"> 
</figure> 
<figure class="grid_1"> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock"> 
</figure>

出典

2017-03-04 20:05:12 b2ok

画像を水平に表示する方法

答えて

関連する問題