如何在div类中设置图像的样式？

Question

我想做这样的事情:

    .even {
        float: left;
        text-align: left;
    }

    .even img {
        float: right;
    }

虽然不行.我希望我的问题只是语法问题,但我无法弄清楚如何做到这一点.我在谷歌周围挖,但我找不到合适的关键字.

我想使用的关联html应该看起来像:

<div class="linkBlock even">
    <img class="linkThumbnail" src="graphics/links/thumbnail_oilcan.jpg" width="267" height="200"/> 
    <h2><a href="http://www.etsy.com/shop/oilcanpress" rel="nofollow">oilcan press</a></h2>
    <p>
        oilcan press is a purveyor of handmade books & word-related artefacts.
        if you'd like to commission work of a particular size or shape or theme let him 
        know via etsy or email: oilcanpress [!at] gmail.com
        they will gladly make custom boxes as per your general requests of colors/concepts.
        if you are desirous of sevral items a bundle can be arranged at reduced prices.
    </p>
    <p>
        you can view much of his work on <a href="http://www.etsy.com/shop/oilcanpress">flickr</a>.
    </p>
</div>

我希望该块的文本浮动并向左对齐,图像向右浮动.使用上面编写的代码,图像在文本上方的页面中居中; 它没有浮动,看起来它仍然使用静态布局.

Answer 1

我只是一个CSS dabbler但我认为这应该工作:

div.even>img {
    float: right;
}

这匹配with类中的子img元素.diveven

Answer 2

<img>&<p>是块级元素,因此除非另有说明,否则它们会换行.您需要在父div中定位<img>&<p>,而不是尝试将文本放在父div上.您还需要为父div和<p>标记指定宽度.这可能是您看到文本出现在图像下方的原因,因为它默认为父div的宽度,并且即使浮动也无法与图像并排放置.你可能想要这样的东西:

.even {
  width: 400px;
  display: block; /*or inline-block*/
  padding: 10px; /*just for a little visual spacing*/
}
.even img {
  position: relative;
  display: inline-block;
  float: right;
  margin-right: 25px;
}
.even p {
  display: inline-block;
  position: relative;
  width: 250px;
  float: right;
}

您还应该将<img>标签移动到h2标签下方,因为它可能会干扰浮动.(我假设您希望它出现在缩略图和文本上方.)