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

这会将img中的div个元素与even类匹配。

Answer 2

<img>＆amp; <p>都是块级元素，因此除非另有说明，否则它们会换行。您需要定位<img>＆amp;父div中的<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标记下方，因为它可能会干扰浮动。（我假设您希望它出现在缩略图和文本上方。）

Answer 3

也许您为段落或其他样式表定义了明确的属性？你的代码对我来说很好。

使用Firebug调试你的CSS。

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

3 个答案: