将文本直接对齐图像右侧？

Question

我试图在代码中从photoshop重新创建我的模型。我设法获得了页面中的所有元素。

我想要一张照片然后必须直接在它的右边发短信。 任何CSS帮助都会很棒，谢谢你提前！

HTML

<h1>About Me</h1>

<div id="about">

    <img src="images/me.png" class="meimage">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lectus tortor, sodales ac velit sit amet, imperdiet posuere risus. Nam congue volutpat vehicula. Sed convallis tempor orci vitae aliquam. Quisque at faucibus eros. Sed laoreet, orci et ultricies luctus, turpis leo pharetra felis, ac tristique ligula nisl id enim. Nullam porta quam et dolor eleifend placerat. Aenean rhoncus, tellus ut sodales suscipit, nunc enim ornare dui, cursus tincidunt urna nisl vitae lacus. Nunc tincidunt auctor dolor, eget laoreet justo gravida vel. In convallis arcu massa, quis gravida purus vestibulum eget.

</div>

CSS

.meimage{
    margin: 20px 20px 20px 20px;
    height:200px;
    width:200px;
}

#about{
    text-align: center;
    width:800px; 
    text-shadow:0 -1px 1px rgba(0,0,0,0.6);
    font-family: 'Verdana', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Cantarell', sans-serif;
font-weight:700;}

h1{
display: block;
padding: 0px 155px;
font-family: 'Cantarell', sans-serif;
text-shadow:0 -1px 1px rgba(0,0,0,0.6);
}

Answer 1

.meimage, #about {
    float: left;
 }

编辑：您也希望标题左侧浮动：

 .col {
    float: left;
    margin: ...;
  }

 <div class="col"><h1>About Me</h1><img ... /></div>
 <div class="col"><p>Lorem Ipsum...</p></div>

Answer 2

您可以使用CSS float在图像周围包装文本。虽然我说文字居中有点奇怪：

.meimage {
    float:left;
    margin:0 1em 1em 0;
}

http://jsfiddle.net/SJTDS/1/

修改

如果这是一个静态页面并且内容不会改变，您可以更新<h1>上的填充以使其与图像对齐。

h1 {
    ...
    padding: 0px 20px;
}

http://jsfiddle.net/SJTDS/4/

请注意，例如，当您上传较大的图片时，固定像素设置可能会很脆弱并会中断。

如果这是一个问题，我会使用不同的结构。