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

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

您可以使用 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/

请记住，固定像素设置可能会很脆弱，并且会在您上传较大的图像时损坏。

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

Answer 2

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