如何水平显示图像答案

【问题标题】：How to display the images horizontally如何水平显示图像
【发布时间】：2017-03-04 18:34:34
【问题描述】：

我正在使用图形标签来显示图像。图像是垂直添加的。我尝试使用带有样式的 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>

【问题讨论】：

我认为 inline-block 会起作用，但请注意，如果您的屏幕或窗口较小且元素无法水平放置，它将变为垂直。
您可以通过简单的谷歌搜索轻松找到一些答案，并且有很多方法可以做到。
是的，我做了谷歌，发现 inline-block 可能有效，但似乎无效。后来我了解到我的页面中有其他样式可以覆盖。

标签： css html image figure

【解决方案1】：

应用这个 css，

figure {
    display : inline-block;
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

这里

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>

【讨论】：

【解决方案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>

【讨论】：