在css中使用float:left时，文本不会显示在右侧位置

我希望

#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>

#视频1、视频2
{
浮动：左；
利润率：20px 20px 0；
}
这是文本1
这是文本2

您应该用“wrap”id将您的部分包装成单独的div，并在其中浮动您的#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>

#text1，#text2{
浮动：对；
利润率：20px 20px 0；
}
#视频1、视频2{
浮动：左；
宽度：100px；
}
.包裹{
宽度：650px；
浮动：左；
边框：1px纯红；
利润率：20px 20px 0；
}
这是文本1
这是文本2

我编辑了你的代码，效果很好。首先编辑您的html：

<div id="video1">
    <span class="desc">this is text1</span>
    <iframe src="http://player.vimeo.com/video/65706935" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <div class="endfloat"></div>
</div> ....

.endfloat{ clear: both; margin: 0; padding: 0; }
#video1, #video2
{
   float: left;
   margin: 20px 10px 0 0;
} ....

检查完整代码。希望这有帮助