1

我想在 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? */
}

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

  1. 给盒子position: absolute。我必须使用固定宽度来使框左侧的标题换行，否则标题文本将在框下方运行。
  2. 让盒子float:right，但这样只有在盒子完成后，预告图像才会开始。

你能想出什么解决办法吗？

4

2 回答 2

0

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

于 2013-08-07T23:48:47.117 回答
0

无需过多考虑，您可以让它浮动并应用 clear[left|right] - 适合您的需要。根据周围的规则，您可能还需要为图像设置 clear，最好使用 [none] 的值。这应该让图像流动并且盒子漂浮而没有任何一个妨碍另一个。

于 2013-08-07T23:10:01.223 回答