定位一个用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容器更宽时，这会失败，因为padding设置为静态值。 （http://jsfiddle.net/4p7qh/）有更好的方法吗？

Answer 1

这是一个纯CSS解决方案：

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

<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/

尝试缩小预览窗格，当宽度为400px或更低时，布局2会启动。 虽然可能不是一个完美的解决方案，但如果你改变#img元素的大小，这仍然可以正常工作。

Answer 2

看看这是否有帮助

#img {
    width: 50px;
    height: 50px;
    background: red;
    float:left;
    margin-top:30px;
}
h2{
    left:-50px;
    position:relative;
}
small{
    display:block;
text-indent:60px;
}