7

我需要让图像在 div 中水平并排显示。我怎样才能做到这一点？

HTML： 

<div class="Wrapper">
  <img src="/wp-content/uploads/2012/07/TFT.png" alt="Smiley face" height="90" width="95" />
  <img src="/wp-content/uploads/2012/07/Ltyt.png" alt="Smiley face" height="90" width="95" />
  <img src="/wp-content/uploads/2012/07/artspng" alt="Smiley face" height="90" width="95" />
</div>

参考：jsFiddle

4

5 回答 5

9

您还可以使用 css 属性display:inline-block或float : left来实现这一点。

HTML 代码

<div>
    <img ... />
    <img ... />
    <img ... />
</div>

CSS 代码

div img{ display: inline-block;}

或者

div img{ display: block;float: left;margin-right: 5px;}
于 2012-07-03T10:57:01.280 回答
4

一般假设您的代码是这样的

<div>
    <img ... />
    <img ... />
    <img ... />
</div>

然后，一个简单的 CSS 属性就可以完成这项工作。

div img { display: inline; }

看到您的 HTML 部分。您可以使用以下 CSS 使它们联机。

.partners img { display: inline; }
于 2012-07-03T10:48:39.987 回答
1

而不是使用inline，这会夺走元素附带的很多控件block，或者更改它们的垂直对齐方式，我会浮动它们：

<html>
    <head>
        <style>
            div.img_holder img
            {
                float: left;
            }
        </style>
    </head>
    <body>
        <div class = "img_holder">
            <img src="" />
            <img src="" />
            <img src="" />
            <img src="" />
        </div>
    </body>
</html>

浮动在 CSS 中是一门独特的科学。它非常值得学习，因为它可以产生一些非常强大的结果。例如，divs使用这些而不是图像inline会阻止您设置它们的高度。 Inline也影响如何margins和padding工作。 vertical-align在浏览器之间是不一致的，如果我没记错的话，实际上根本不应该产生你正在寻找的结果。

于 2012-07-03T10:55:03.183 回答
0

现在你可以习惯了

您的默认链接是http://tinkerbin.com/ob9HFOA4

CSS

   img{
   display: inline-block;
    vertical-align: top;
    }

现场演示http://tinkerbin.com/a5BxIZrs

于 2012-07-03T10:47:59.403 回答
0

首先，为了不弄乱您可能要添加的其他图像，请执行以下操作：

.Wrapper img{ float: left; }

这会将 .Wrapper 类中的所有图像浮动到左侧。如果调用这些 css 规则的页面中的所有图像都将左对齐，请执行以下操作：

.Wrapper img{ float: left; }

编辑：将此规则添加到 .Wrapper

.Wrapper{ width: 100%; }
于 2012-07-03T18:49:19.927 回答