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上述例子

http://jsfiddle.net/yp7f0nz1/

Answer 1

所需要的只是不浮动info div和（根据其他评论）添加足够的padding=left，以便文本不会包围缩略图。

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

Jsfiddle Demo

修改

我被提醒一个表会自动执行此操作。当然，我们有显示：table / table-cell对我们开放。

移除浮动并使用

.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

Paragraph标记导致父级增加宽度

1 个答案: