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

Question

我需要有关如何创建具有流体大小调整功能的简单图像网格的说明。我想在我的首页上放置三个(大约 300 像素)方形图像，它们跨越宽度并在调整窗口大小时或在窗口上查看时做出响应。如果屏幕尺寸较小，则三个图像将保持水平，但会缩小。在手机上查看时，这三张图片会堆叠在一起，第一张在顶部，中间一秒，最后三分之一。

我可以让图像显示出来，但我在使用 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

尝试“文本对齐:居中；”在容器和“显示:内联 block ；”在图像上。

必须做的事。

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

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

要根据窗口宽度更改页面上的图像位置，您可以执行以下操作:

1. 指定具有相对大小的标签。例如“宽度:80%；”页面宽度始终为父容器的 80%(如果父容器为 body，则为窗口宽度的 80%)。默认情况下， block 级元素的宽度为 100%；如果您不希望它超过某个值，您可以指定 max-width 属性来这样做。元素:“宽度:100%；最大宽度:906px；”无论窗口大小如何，宽度始终为 960 像素或更小。

2. 如果您想为移动查看器更好地控制网格和装饰(例如，注意一些元素)，您可以使用 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' />