定位用css拆分的元素

我在div容器的右侧有一个标题/小文本

HTML:

小提琴：

我试图实现以下目标，但我不能修改给定的html代码。我想用简单的css从给定的html代码中得到这一点：

我尝试了以下方法，但是当div容器更宽时，这失败了，因为padding被设置为静态值。（）有更好的方法吗？

看看这是否有帮助

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

---

下面是一个纯CSS解决方案：

这就是我可能修改HTML结构以允许更大的灵活性的方式。我添加了一个container元素，并将小元素从heading元素中去掉：

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

实例：

尝试缩小预览窗格的范围，当宽度为400px或以下时，将启动布局2。

---

虽然这可能不是一个完美的解决方案，但如果您更改#img元素的大小，它仍然可以正常工作。

我们可以用JS修改HTML吗？不，只是基本的css。背景是显示的结果是针对手机的，因此我只能通过媒体查询应用css规则。我很好奇，为什么你不能修改html代码，使其能够表示文档的实际结构？事实上，我可以修改html代码。但我必须确保我现在可以通过媒体查询应用的纯css在演示文稿和所需结果之间进行“切换”。你有什么想法吗？谢谢，但这并不能像我想象的那样解决问题：当div变宽（例如80px）时，标题h2就不在同一个地方了。我希望这能与宽度为非静态的div一起工作。除非您修改HTML或使用javascript修改DOM和/或重新计算位置/宽度，否则这是不可能的。您将采用什么HTML结构来仅使用css在两个输出之间切换？您能提供您需要完成的其他输出的屏幕截图吗？太棒了！非常感谢你！谢谢，但这并没有像我想象的那样解决问题：当div变宽（例如80px）时，标题h2就不在同一个地方了。我希望这是一个非静态宽度的div。

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

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