html - 导致父级增加宽度的段落标记

Question

我有一个基本布局，它是一个带缩略图的 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>

CSS

body {
    background-color: rgb(20, 20, 20);
    color: rgb(238, 238, 221);
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 300;
    margin: 20px;
}
a {
    color: rgb(111, 178, 244);
}
.stunting-video {
    background-color: rgba(255, 255, 255, 0.125);
    border-radius: 30px;
    box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.3) inset, -5px -5px 10px rgba(0, 0, 0, 0.9) inset;
    clear: both;
    margin: 10px 0;
    overflow: auto;
    padding: 5px 15px 15px;
}
.stunting-video .thumbnail {
    border: 0;
    cursor: pointer;
    float: left;
    margin: 10px 20px 0 0;
    padding: 0;
}
.stunting-video .thumbnail img {
    border-radius: 15px 0 0 15px;
}
.stunting-video .info {
    float: left;
}
.stunting-video .title {
    color: rgb(245, 215, 122);
    font-size: 150%;
    font-weight: bold;
}
.stunting-video p {
    margin: 5px 0;
}

上面的js fiddle例子

http://jsfiddle.net/yp7f0nz1/

Answer 1

所需要的只是不 float info div 并(根据其他评论)添加足够的padding=left 以便文本不会环绕缩略图。

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

Jsfiddle Demo

编辑

有人提醒我，表格会自动执行此操作。当然，我们有 display:table/table-cell 对我们开放。

删除 float 并使用

.stunting-video {
    display: table;
}

和

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

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

JSfiddle Demo 2