如何在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类中设置图像的样式？

回答

相关问题