css - 定位一个用 css 分割的元素

Question

我在 div 容器的右侧放置了一个标题/小文本。

HTML:

<div id="img"></div>
<h2>Heading<small>A long long text</small></h2>

CSS:

#img {
  width: 50px;
  height: 50px;
  background: red;
  float: left;
}

fiddle : http://jsfiddle.net/U8BnX/

我正在尝试实现以下目标，但我无法修改给定的 html 代码。我想用纯 css 从给定的 html 代码中得到这个:

我尝试了以下方法，但是当 div 容器更宽时，这失败了，因为填充被设置为静态值。 ( http://jsfiddle.net/4p7qh/ ) 有更好的方法吗？

Answer 1

这是一个纯 CSS 解决方案:

这就是我可能修改 HTML 结构以提供更大灵 active 的方式。我添加了一个容器元素，并从标题元素中取出小元素:

<div class="container">
    <div id="img"></div>
    <h2>Heading</h2>
    <small>A long long text</small>
</div>

更新的样式表:

/* Common styles */
#img {
    width: 50px;
    height: 50px;
    background: red;
    float: left;
}

/* Layout 1 */
.container h2 { display:inline; font-size:24px; }
.container small { font-size:20px; font-weight:bold; }


@media screen and (max-width: 500px) {
    /* Layout 2 */
    .container {
        position:relative;        
    }

    .container h2 { position:absolute; top:-20px; left:0; }
    .container { padding-top:40px; }
}

实例:

http://jsfiddle.net/U8BnX/2/

尝试缩小预览 Pane ，布局 2 在宽度为 400 像素或以下时启动。虽然这可能不是一个完美的解决方案，但如果您更改 #img 元素的大小，它仍然可以正常工作。