Html 导致父项增加宽度的段落标记

我有一个基本的布局，它是一个带有缩略图的div，向左浮动，然后是一个带有一些文本（标题、描述、链接）的div，也向左浮动。它们本来是并排的，但一旦浏览器太窄，它就会将第二个div推到第一个div的下方，而不仅仅是减小其宽度

我不敢相信我在这个问题上被难住了，因为它看起来很简单。我真的很感谢你的帮助

html

<div class="stunting-video odd">
    <div class="thumbnail">
        <img src="https://i.ytimg.com/vi/LixKwLQiSGU/mqdefault.jpg" data-video-id="LixKwLQiSGU" class="show-video" alt="stunting video">
    </div>
    <div class="info">
        <p class="title">GTA V - Stunt practise 03</p>
        <p class="description">A play-through of a race created to practise a motorbike stunt in GTA V where you can jump from the docks to near the airport.  Race is available here...<br>
        <br>
        <span class="highlight">PS3:</span> <a href="http://rsg.ms/0330f82">http://rsg.ms/0330f82</a><br>
        <span class="highlight">Xbox360:</span> <a href="http://rsg.ms/4464ca5">http://rsg.ms/4464ca5</a><br>
        <br>
        Special credits to Cheddar for the 360 version.</p>
    </div>
</div>

js上述小提琴示例

---

所需的只是不浮动

info

div，并（根据其他注释）添加足够的

padding=left

，以便文本不会环绕缩略图

.stunting-video .info {
    padding-left: 350px;;
}

编辑

有人提醒我，一张桌子会自动完成这项工作。当然，我们有display:table/table cell

移除浮子并使用

.stunting-video {
    display: table;
}

及

---

取消浮动

info

div-如果文本位于图像下方，则会导致问题。。。我希望信息位于图像右侧的列中，只需将

padding left

添加到info div中，使其足以推过缩略图。我的问题是它不是静态页面。信息是动态加载的，我不能保证缩略图的大小。然后你需要JS…除非你能限制缩略图的大小，否则没有一刀切的解决方案。。对不起，我不相信没有纯css的方式来做这个非常简单的布局。我可以用一张桌子，它可以100%工作。如果一张桌子可以，就用一张。没有理由不这么做。@Archer你在白手起家。动态加载信息的是什么？PHP？Javascript？红宝石？CSS仍然适用。

.stunting-video {
    display: table;
}

.stunting-video .thumbnail {
    display: table-cell;
    vertical-align: top;
}

.stunting-video .info {
    display: table-cell;
    vertical-align: top;
}