Html 如何对齐段落旁边的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12467062/
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 align an image next to a paragraph
提问by AppSensei
Something like this...
像这样的东西...
[img here ] [ Paragraph here ]
[img在这里] [段落在这里]
instead of what I have now.
而不是我现在拥有的。
[img here ]
[图片在这里]
[ Paragraph here ]
[这里的段落]
HTML
HTML
<p> <div class="polaroid">
<img src="Me1.jpeg" title="Me" alt="Me" align="left" />
<p class="polo">That's Me!!!</p>
</div></p>
</div>
<div class="blocker03">
<p class="description">
blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah
blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah
blah blahblah blahblah blahblah blahblah blah</p>
</div>
CSS
CSS
.blocker03 {
width:470px;
padding-left:60px;
margin:0 0 10px 25px;
font-size:12px;
display:inline-block;
}
.polaroid {
postion: relative;
float: right;
border: 3px solid #C6930A;
border-style:dotted;
background: #66594C;
width: 140px;
padding: 5px;
margin: 5px;
text-align: center;
-moz-box-shadow: 1px 1px 3px #222;
-moz-transform: rotate(-5deg);
-webkit-box-shadow: 1px 1px 3px #222;
-webkit-transform: rotate(-5deg);
box-shadow: 1px 1px 3px #222;
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
回答by Zach Lysobey
so thats some sloppy code you have there, but check out this jsfiddle for an example using float:
所以这就是你那里的一些草率代码，但请查看此 jsfiddle 以获取使用float以下示例的示例：
And here's something loosly based on your code:
根据您的代码，这里有一些松散的东西：
回答by andy_dodd
Isn't this all a bit overkill when this will work fine:
当这可以正常工作时，这不是有点矫枉过正吗：
<p><img src="*[your image]" align="right" valign="middle" vspace="5" hspace="5"/>[your text]</p>
回答by tv4free
Try this
尝试这个
<div style="float:left;width:800px" id="container">
<div id="rightContainer" style="float:left;width:100px;">
<img src="Me1.jpeg" title="Me" alt="Me" align="left" />
<p class="polo">That's Me!!!</p>
</div>
<div id="leftContainer" style="float:right;width:600px;">
<p class="description"> blah blah blah blahblah blahblah blahblah</p>
</div>
</div>
回答by Max Allan
This one will work:
这将工作：
.polaroid img, .polaroid p{
float:left;
display:inline;
}
