Question

我需要有关如何使用流体调整大小创建简单图像网格的说明。我想在我的首页上放置三个（大约300px）方形图像，这些图像跨越宽度，并在调整窗口大小或查看时响应。如果屏幕尺寸较小，则三个图像将保持水平，但会缩小。在手机上查看时，三个图像将堆叠在一起，第一个位于顶部，中间位于第二个，最后一个位于第三个。

我可以显示图像，但我遇到了CSS问题。

<div id="content" class="col-full">

 <div id="grid">

    <a href="http://mywebsite.com/info/"><img src="http://lorempixel.com/320/320"></a>
    <a href="http://mywebsite.com/about/"><img src="http://lorempixel.com/320/320"></a>
    <a href="http://mywebsite.com/contact/"><img src="http://lorempixel.com/320/320"></a>

    </div>

<style type="text/css">
#grid img {
float: center;
margin: 25px;
}
</style>

对于这个NOOB，任何建议都表示赞赏。： - ）

Answer 1

尝试“text-align：center;”在容器和“display：inline-block;”在图像上。

必须做的事情。

示例：http://jsfiddle.net/SvR6Z/1/

编辑：添加缩小屏幕的方法。

要更改页面上的图像位置，它会响应您可以执行以下操作的窗口宽度：

指定具有相对大小的标记。例如，“width：80％;”页面宽度始终是父容器的80％（如果父容器是正文，那么它将是窗口宽度的80％）。默认情况下，块级元素的宽度为100％;如果您不希望它超过某个值，则可以指定max-width属性来执行此操作。元素：“宽度：100％;最大宽度：906px;”无论窗口大小如何，其宽度始终为960px或更低。
如果你想对移动观众的网格和装饰有更多的控制（比如说某些元素），oyu可以使用css媒体查询（在这里阅读更多关于它们的内容：http://css-tricks.com/6731-css-media-queries/）这样做。例如，如果您以这种方式将css链接到页面，它将仅在窗口宽度大于701px且小于900px时才起作用：
```
<link rel='stylesheet' media='screen
      and (min-width: 701px) 
      and (max-width: 900px)' href='css/medium.css' />
```

三个图像水平w /响应设计

1 个答案: