如何在div類中設置圖像的樣式？

我想要做這樣的事情：如何在div類中設置圖像的樣式？

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

我想該塊的文本和浮動左對齊，與圖像浮動權。使用上面所寫的代碼，圖像正位於文本上方的頁面中央;它不是浮動的，它看起來仍然在使用靜態佈局。

來源

2011-03-28 JoshuaD

這個語法看起來不錯。你試圖達到的究竟是什麼？ – 2011-03-28 00:43:24

@AndrewCooper：請參閱上面的修改。謝謝參觀。 – JoshuaD 2011-03-28 00:46:29

該代碼似乎在JSFiddle中工作正常 - 請參閱http://jsfiddle.net/kgEAc/1/ – 2011-03-28 00:51:21

我只是一個半吊子的CSS，但我認爲這應該工作：

div.even>img { 
    float: right; 
}

這符合孩子div內img元素與even類。

來源

2011-03-28 00:50:45

也許你有一個明確的屬性定義的段落或其他樣式表？你的代碼適合我。

使用Firebug來調試你的CSS。

來源

2011-03-28 00:49:30 peq

<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; 
}

你也應該將你的H2標籤下方的<img>標籤，因爲它可能與浮干擾。（我假設你想讓它出現在縮略圖和文本上方。）

來源

2011-03-28 01:18:33 biggles

感謝您的解釋。雖然幫助了我 – HoNgOuRu 2014-12-03 02:52:57

如何在div類中設置圖像的樣式？

回答

相關問題