css框对齐问题

时间:2012-05-20 02:41:52

标签: css google-chrome alignment

我似乎无法弄清楚如何在促销div中对齐img的顶部和复制元素。有什么想法吗?这不会在chrome中正确搞定。

我已经查看了很多其他问题,似乎无法弄明白。

在一天结束时,我希望能够在div的左上方有一个打孔框,但我想确保文本溢出不会环绕图像。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.promo {
    float: left;
    width: 200px;
    background-color: pink;
}
.promo img {
float: left;
width: 48px;
height: 48px;
background-color: orange;
}
.copy {
    float: left;
    width: 152px;
    background-color: yellow;
}
</style>
</head>
<body>
<div class="promo"> <img src="" alt="" />
  <p class="copy">This is the content. I have a lot of contentfff this it s a fodis sod sod sfns s ndosn</p>
  <div style="clear:both;"></div>
</div>
<div class="promo"> <img src="" alt=""/>
  <p class="copy">This is the content. I have a lot of contentfff this it s a fodis sod sod sfns s ndosn</p>
  <div style="clear:both;"></div>
</div>
<div class="promo"> <img src="" alt=""/>
  <p class="copy">This is the content. I have a lot of contentfff this it s a fodis sod sod sfns s ndosn</p>
  <div style="clear:both;"></div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

这就是你所说的:http://jsfiddle.net/NuVww/21/