css框对齐问题_Css_Google Chrome_Alignment

css框对齐问题

css google-chrome

css框对齐问题,css,google-chrome,alignment,Css,Google Chrome,Alignment,我似乎不知道如何将img的顶部与promo div中的复制元素对齐。有什么想法吗？这在chrome中无法正确对齐我已经看了很多其他的问题，但似乎无法理解在一天结束时，我希望能够在div的左上角有一个打孔框，但我希望确保文本溢出不会环绕图像 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .promo {

我似乎不知道如何将img的顶部与promo div中的复制元素对齐。有什么想法吗？这在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>


.宣传片{
浮动：左；
宽度：200px；
背景颜色：粉红色；
}
.推广img{
浮动：左；
宽度：48px；
高度：48px；
背景颜色：橙色；
}
.复制{
浮动：左；
宽度：152px；
背景颜色：黄色；
}
这是内容。我有很多关于这件事的内容
这是内容。我有很多关于这件事的内容
这是内容。我有很多关于这件事的内容

这就是你所说的：

我把你的代码插入了浏览器，当我在chrome中查看它时，它给了我一张快乐的脸。这仍然不是你想要的吗？出于某种原因，这在JSFIDLE中似乎是可行的，但是如果你将代码放入html文件，然后在chrome中打开它，文本似乎会出现在图像的一半。因为你需要通过应用

边距：0来重置p
标记的默认样式在他们身上。如果在JSFIDLE中关闭Normalized.css，您可以观察到这种行为。遗憾的是，这不是我想要的，我希望文本和图像沿顶部排列。