如何在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;
}

這匹配div中的子img元素與類even 。

Answer 2

<img> ＆ <p>都是塊級元素，因此除非另有說明，否則它們會換行。 您需要將<img> ＆ <p>放在父div中，而不是嘗試將文本放在父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標記下方，因為它可能會干擾浮動。 （我假設您希望它出現在縮略圖和文本上方。）

Answer 3

也許您為段落或其他樣式表定義了明確的屬性？ 你的代碼對我來說很好。

使用Firebug調試你的CSS。