Question

我需要让图像在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

Answer 1

您还可以使用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;}

Answer 2

关于代码的一般假设是这样的

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

然后，一个简单的CSS属性将完成工作。

div img { display: inline; }

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

.partners img { display: inline; }

Answer 3

现在你可以习惯了

默认链接为http://tinkerbin.com/ob9HFOA4

<强>的CSS

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

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

Answer 4

而不是使用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在浏览器之间是不一致的，如果我没有弄错的话，根本不应该产生你正在寻找的结果。

Answer 5

最重要的是，为了不弄乱你可能会添加的其他图像，请执行以下操作：

.Wrapper img{ float: left; }

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

.Wrapper img{ float: left; }

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

.Wrapper{ width: 100%; }

如何使<img/>标签在div中水平排列？

5 个答案: