如何将图片与段落对齐

Question

像这样...

[插入图片] [段落内容]

而不是我现在拥有的。

[插入图片]

[段落内容]

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

.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);
    } 

- AppSensei

Answer 1

你写的代码有些混乱，但是可以查看这个jsfiddle示例来了解如何使用float：

http://jsfiddle.net/tH2qc/

以下示例与你的代码类似：

http://jsfiddle.net/zZkpw/

- Zach Lysobey

---

你还能从一个 CSS 初学者身上期待什么呢，哈哈。 - AppSensei

哈哈 - 我们都要从某个地方开始。阅读一篇关于代码风格的文章。拥有缩进良好和组织有序的代码是你可以做的最好的事情，以获得更好的效果。这可能是一个不错的资源：https://github.com/styleguide/css - Zach Lysobey

谢谢您先生，我一定会努力解决的。对于初学者来说，CSS对齐问题确实很棘手。 - AppSensei

非常正确。MDN（Mozilla开发者网络）还有一些关于定位和CSS盒模型的优秀文章。你很快就会成为专家。 - Zach Lysobey

太棒了，我会去研究一下的。 - AppSensei

Answer 2

当这个方案能够正常工作时，这些都有点过度了。

<p><img src="*[your image]" align="right" valign="middle" vspace="5" hspace="5"/>[your text]</p>

- andy_dodd

---

align已经被废弃。 - handle

Answer 3

试试这个

<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>

- tv4free

Answer 4

这个会起作用：

.polaroid img, .polaroid p{
   float:left;
   display:inline;
}

- Max Allan