Html 如何内联显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12394866/
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 display images inline
提问by RMi Flores
I have a navigation div with three images. Each image has a title element absolutely positioned at the bottom of the picture. I am trying to display all three of the images adjacent to each other on the same line but the pictures are displayed as blocks.
我有一个包含三个图像的导航 div。每张图片都有一个绝对位于图片底部的标题元素。我试图在同一行上显示所有三个彼此相邻的图像，但图片显示为块。
HTML:
HTML：
<div class = "nav">
<div class = "container">
<div class = "image">
<img src = "img1">
</div>
<div class = "title">
<p> text1 </p>
</div>
</div>
<div class = "container">
<div class = "image">
<img src = "img2">
</div>
<div class = "title">
<p> text2 </p>
</div>
</div>
<div class = "container">
<div class = "image">
<img src = "img3">
</div>
<div class = "title">
<p> text3 </p>
</div>
</div>
</div>
CSS:
CSS：
.nav {
display: inline;
}
.container {
position: relative;
width: 100%;
}
.image img {
width: 30%;
height: 4.5in;
}
.title {
width: 30%;
position: absolute;
bottom: 0; left: 0;
}
回答by Manuel Choucino
You will need to fix your HTML code first.
您需要先修复您的 HTML 代码。
it is <div class = "title">and not <div class = "title>Missing the " at the end of each of your title.
它是<div class = "title">并且不会<div class = "title>错过每个标题末尾的“。
then add float to your container and put a width of 30%. Because you want your Image to be 30% width right.
然后将浮动添加到您的容器并放置 30% 的宽度。因为您希望您的图像宽度为 30%。
.container {
float:left;
position: relative;
width: 30%;
}
As you put 3 time container, you are asking 100% X 3 to be aligned,
当您放置 3 个时间容器时，您要求 100% X 3 对齐，
also create a image class in your CSS with float in it.
还在你的 CSS 中创建一个带有浮动的图像类。
.image{
float:left;
}
And to conclude, change the width of your .image img in your CSS for 100% that way it will take the 100% place of the 30% container allowed.
最后，将 CSS 中 .image img 的宽度更改为 100%，这样它将占据允许的 30% 容器的 100% 位置。
.image img {
width: 100%;
height: 4.5in;
}
回答by cimmanon
Your images are already set to inline, trouble is, their parent isn't. You'll need this:
您的图像已经设置为内联，麻烦的是，它们的父级不是。你需要这个：
container { display: inline-block }
It is worth noting that you have some markup you probably don't really need
值得注意的是，您有一些您可能并不真正需要的标记
<div class = "title>
<p> text3 </p>
</div>
Could be replaced with this:
可以换成这个：
<h1 class="title">text3</h1>
Or this:
或这个：
.container h1 {
width: 30%;
position: absolute;
bottom: 0; left: 0;
}
-snip-
-剪-
<h1>text3</h1>
