Html 如何使 <img> 标签在 div 中水平排列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11309301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the <img> tags line up horizontally in the div?
提问by justcode
I need to make the images show up side by side horizontally in the div. How can I do that?
我需要使图像在 div 中水平并排显示。我怎样才能做到这一点？
HTML:
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>
Reference: jsFiddle
参考：jsFiddle
回答by Ravi
You could also use css properties display:inline-blockor float : leftto achieve this.
您还可以使用 css 属性display:inline-block或float : left来实现这一点。
HTML Code
HTML代码
<div>
<img ... />
<img ... />
<img ... />
</div>
CSS Code
CSS 代码
div img{ display: inline-block;}
or
或者
div img{ display: block;float: left;margin-right: 5px;}
回答by Starx
On the general assumption of your code being something like this
一般假设您的代码是这样的
<div>
<img ... />
<img ... />
<img ... />
</div>
Then, a simple CSS property will get the job done.
然后，一个简单的 CSS 属性将完成工作。
div img { display: inline; }
On seeing your HTML portion. You can use the following CSS to get them online.
看到你的 HTML 部分。您可以使用以下 CSS 使它们联机。
.partners img { display: inline; }
回答by Sandy Gifford
Rather than using inline, which robs you of a lot of the control that comes with blockelements, or changing their vertical align, I'd float them:
与其使用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>
Floating is a peculiar science of its own in CSS; it's very much worth learning as it can yield some very powerful results. For example, were these divs, and not images, using inlinewould keep you from setting their height. Inlinealso affects how marginsand paddingwork. vertical-alignis inconsistent between browsers and, if I'm not mistaken, shouldn't actually yield the results you're looking for, at all.
浮动在 CSS 中是一门独特的科学。它非常值得学习，因为它可以产生一些非常强大的结果。例如，如果这些divs，而不是图像，使用inline会阻止你设置它们的高度。 Inline也会影响方式margins和padding工作。 vertical-align浏览器之间不一致，如果我没记错的话，根本不应该产生您正在寻找的结果。
回答by Rohit Azad
now you can used to
现在你可以习惯
Your default linkis http://tinkerbin.com/ob9HFOA4
您的默认链接是http://tinkerbin.com/ob9HFOA4
Css
css
img{
display: inline-block;
vertical-align: top;
}
live demo http://tinkerbin.com/a5BxIZrs
回答by menislici
Firts of all, in order not to mess up your other images you're probably going to add, do this:
首先，为了不弄乱您可能要添加的其他图像，请执行以下操作：
.Wrapper img{ float: left; }
This will float all your images within the .Wrapper class to the left. If all images in the page where these css rules are called will be aligned to the left, do this:
这会将 .Wrapper 类中的所有图像浮动到左侧。如果调用这些 css 规则的页面中的所有图像都将向左对齐，请执行以下操作：
.Wrapper img{ float: left; }
EDIT:Add this rule to .Wrapper
编辑：将此规则添加到 .Wrapper
.Wrapper{ width: 100%; }
