Question

我正在使用数字标签来显示图像。图像垂直添加。我尝试使用带有样式的div作为显示内联块。但它似乎没有用。我无能为力。关于如何使其水平显示的任何想法。

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

Answer 1

您所做的是指定的图像在CSS中显示为阻止 - display: block;
您需要将它们显示为的内联，

试试这个经过编辑的代码 -

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

Answer 2

应用此CSS，

figure {
    display : inline-block;
}

Answer 3

这里

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

响应式网页设计：

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

如何水平显示图像

4 个答案: