浮动:左侧破损

Question

比较一下这个http://jsfiddle.net/AndyMP/tbYsM/1/和这个不能工作的http://jsfiddle.net/AndyMP/tbYsM/2/。

第一个只是一个文本块。第二，我尝试将它分成两列，一列接一列。我已经用标签包围了文本，包括打破它的部分。

你知道解决方案是什么吗？

JQUery

    var $block1 = $(".block1");
var $block2 = $(".block2");
var $blog_slide_container = $('#blog_slide_container');
$blog_slide_container.animate({height: $block1.outerHeight()});

$(function() {
$(".left_slide").click(function() {
    $block1.stop(true, true).animate({ left: -400 }, 500, function () { $(this).hide(); });
    $blog_slide_container.animate ({height: $block2.outerHeight()});
    $block2.stop(true, true).animate({ left: 0 }, 500);

});

$(".right_slide").click(function() {
    $block1.show();
    $blog_slide_container.animate({height: $block1.outerHeight()});
    $block2.stop(true, true).animate({ left: 400 }, 500);
    $block1.stop(true, true).animate({ left: 0 }, 500);
});
});

Answer 1

只需在两个浮动的div后面添加一个带有clear: left;的div即可。Here它正在运行。

Answer 2

我认为您只需要将float: left;放在外部div上，然后将clear: both;或clear: left;放在内部div上。请参阅更新：http://jsfiddle.net/tbYsM/4/