css - youtube iframe 周围的 float 列

Question

如何在 YouTube 视频 iframe 周围 float 列？ 这是 HTML 代码:

        <div id="content"> 
            <div class="column">
                <div class="column_header">Lorem ipsum</div>
                Lorem ipsum dolor sit amet... 
                <br/><br/>
            </div>
            <div class="column">
                <div class="column_header">Proin lacus ex</div>
                Proin lacus ex...
            </div>
            <div class="column">
                <div class="column_header">Duis lacus lectus</div>
                Duis lacus lectus... 
            </div>
            <div class="ytvid">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/2rGGw0cJjYg" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>

还有 CSS:

#content{
    clear: both;
    background-color: #FFFFFF;
    padding: 20px;
    padding-top: 0;
    border-top: 20px solid #58AB27;
    overflow: hidden;
}

.column{
    position: relative;
    float: left;
    max-width: 30%;
    min-width: 300px;
    margin: 0;
    padding: 15px;
}

.column_header{
    font-size: 150%;
    line-height: 2em;
}

列内容的长度可能会改变。现在例如我得到这样的东西:

我希望 youtube iframe 占用第 1 列和第 2 列下的空白空间。所以我想得到这样的东西:

或者(通过更改列内容)像这样:

Answer 1

也许这就是您的答案:Live example on the jsFiddle

#container {
    margin: 0 auto;
    width: 600px;
}

#right {
    float: right;
    width: 40%;
    background: yellow;
}

#left {
    float: left;
    width: 60%;
    background: red;
}

.col {
    float:left;
    width: 50%;
}

.col-video {
    float: left;
    width: 100%;
    height: 50px;
    background: pink;
}

.purple {
    background-color: purple;
    height: 150px;
}
.blue {
    background-color: blue;
    height: 100px;
}
.green {
    background-color: green;
    height: 250px;
    width: 100%;
}

<div id="container">
    <div id="left">
        <div class="col purple">
            col1
        </div>
        <div class="col blue">
            col1
        </div>
        <div class="col-video">
            col-video
        </div>
    </div>
    <div id="right">
        <div class="col green">
            col2
        </div>
    </div>
</div>