Question

我想在HTML页面中添加一个框，并以非常罕见的方式对其进行样式设置。我找不到合适的CSS规则或正确的搜索条件。这就是一切应该是这样的：

this head might    ,----------------------.
be quite long and  | this box has dynamic |
should wrap to     | height and width and |
the next line      | sticks to right side |
                   |                      |
===================| it will probably be  |===
=== this area    ==| longer than the      |===
=== has full     ==| headline and shall   |===
=== width and    ==| overlap things below |===
=== is below the ==`----------------------'===
=== the box      =============================
==============================================

该框显示一些统计数据，并具有动态尺寸（没有固定的高度/宽度）。这就是我的风格：

#box {
    float: right;
    z-index: 100;
    width:  auto; /* default, inserted for clarification */
    height: auto;
}

标题下方的元素是整页宽度的前贴片广告。因为它只是一个图像而且盒子是半透明的，所以盒子与图像重叠也没问题。我希望图像区域的样式如下：

#teaser {
    background-image: url('...');
    width: 100%;
 /* clear: both; /* is probably not useful, is it? */
}

我只能想到这些方法有哪些主要缺点：

给出框position: absolute。我必须使用固定宽度使标题包装在框的左侧，否则标题文本将在框下方运行。
让框float:right，但这样，预告片图片将在框完成后开始。

你能想到任何解决方案吗？

Answer 1

没有太多考虑，你可以让它浮动并应用清楚的[左|右] - 以你的需要为准。根据周围的规则，您可能还需要为图像设置清除，最好使用值[none]。这应该让图像流动并且盒子漂浮而不会妨碍另一个。

Answer 2

听起来你的#teaser元素正在清除浮动，或者它上面的元素有一个clearfix应用于它（它将包含该元素内部的浮动元素）。默认情况下，浮动元素的行为与您描述的完全相同，因此其他内容必须干扰。有关默认行为的简单示例，请参阅此jsFiddle。

浮动框向右，让它与静态元素下方的元素重叠

2 个答案: