css - 使用 float :left in css 时文本未显示在正确位置

Question

我要#text1显示在 #video1 的右侧, #text2显示在 #video2 的右侧，但是现在，#text2也显示在 #video1 的右侧.那么谁能解释为什么会这样？以及如何解决？

<style>
#video1, #video2
{
    float: left;
    margin: 20px 20px 0 0;
}
</style>
<div id="video1">
<iframe src="http://player.vimeo.com/video/65706935" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div id="text1">
this is text1
</div>
<div id="video2">
<iframe src="http://player.vimeo.com/video/67739892" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div id="text2">
this is text2
</div>

Answer 1

你应该用“wrap”id 将你的部分包装成单独的 div 并在其中 float 你的#text #video Div:

<style>
    #text1, #text2 {
        float: right;
        margin: 20px 20px 0 0;
    }

    #video1, #video2 {
        float: left;
        width: 100px;
    }

    .wrap {
        width: 650px;
        float: left;
        border: 1px solid red;
        margin: 20px 20px 0 0;
    }
</style>

<div class="wrap">
    <div id="video1">
        <iframe src="http://player.vimeo.com/video/65706935" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
    <div id="text1">
        this is text1
    </div>
    <div style="clear: both"></div>
</div>

<div class="wrap">
    <div id="video2">
        <iframe src="http://player.vimeo.com/video/67739892" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
    <div id="text2">
        this is text2
    </div>
    <div style="clear: both"></div>
</div>