Html 如何在 div 类中设置图像的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5453586/
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 set the style of an image in a div class?
提问by JoshuaD
I want to do something like this:
我想做这样的事情：
.even {
float: left;
text-align: left;
}
.even img {
float: right;
}
It's not working though. I'm hoping my problem is just a syntax one, but I can't see to figure out how to do this. I've dug around google, but I'm having trouble finding the right set of keywords.
虽然它不起作用。我希望我的问题只是一个语法问题，但我无法弄清楚如何做到这一点。我已经在 google 周围搜索过，但我无法找到正确的关键字集。
The associated html I'd like to use should look something like ths:
我想使用的相关 html 应该看起来像这样：
<div class="linkBlock even">
<img class="linkThumbnail" src="graphics/links/thumbnail_oilcan.jpg" width="267" height="200"/>
<h2><a href="http://www.etsy.com/shop/oilcanpress" rel="nofollow">oilcan press</a></h2>
<p>
oilcan press is a purveyor of handmade books & word-related artefacts.
if you'd like to commission work of a particular size or shape or theme let him
know via etsy or email: oilcanpress [!at] gmail.com
they will gladly make custom boxes as per your general requests of colors/concepts.
if you are desirous of sevral items a bundle can be arranged at reduced prices.
</p>
<p>
you can view much of his work on <a href="http://www.etsy.com/shop/oilcanpress">flickr</a>.
</p>
</div>
I'd like for the text of that block to float and align left, and the image to float right. With the code I have written above, the image is being centered in the page above the text; it's not floating, it looks like it's still using the static layout.
我希望该块的文本浮动并左对齐，图像向右浮动。使用我上面写的代码，图像在文本上方的页面中居中；它不是浮动的，看起来它仍在使用静态布局。
回答by A Lee
I'm only a CSS dabbler but I think this should work:
我只是一个 CSS 爱好者，但我认为这应该有效：
div.even>img {
float: right;
}
This matches child imgelements inside a divwith class even.
这将匹配imga中的子元素div与 class even。
回答by biggles
<img>& <p>are both block-level elements and so they line-break unless other wise specified. You need to position the <img>& <p>inside the parent div, instead of trying to position the text on the parent div. You also need to specify a width for the parent div and the <p>tag. This is probably why you are seeing the text appear below the image, because it is defaulting to the width of the parent div and cannot fit side by side with the image even though it is floated. You probably want something like this:
<img>&<p>都是块级元素，因此除非另有说明，否则它们会换行。您需要将<img>&定位在<p>父 div 内，而不是尝试将文本定位在父 div 上。您还需要为父 div 和<p>标签指定宽度。这可能就是您看到文本出现在图像下方的原因，因为它默认为父 div 的宽度，并且即使它处于浮动状态也无法与图像并排放置。你可能想要这样的东西：
.even {
width: 400px;
display: block; /*or inline-block*/
padding: 10px; /*just for a little visual spacing*/
}
.even img {
position: relative;
display: inline-block;
float: right;
margin-right: 25px;
}
.even p {
display: inline-block;
position: relative;
width: 250px;
float: right;
}
You should also move your <img>tag below your h2 tag as it might interfere with the float. (I'm assuming you want this to appear above the thumbnail and the text.)
您还应该将<img>标签移动到 h2 标签下方，因为它可能会干扰浮动。（我假设您希望它出现在缩略图和文本上方。）
回答by peq
Maybe you have a clear attribute defined for the paragraph or some other style sheets? Your code works fine for me.
也许您为段落或其他一些样式表定义了一个明确的属性？你的代码对我来说很好。
Use Firebug to debug your css.
使用 Firebug 调试您的 css。
