Javascript 分区对齐问题

代码如下：

<div>
    <div style="border:1px solid black;width:250px;float:left">
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
    </div>
    <div style="border:1px solid black;float:right">
        <div>2222</div>
    </div>
</div>

1111
1111
1111
1111
1111
2222

这就是我得到的：

如何才能使div不从内容占位符中移出（它没有固定的宽度，如果我在其中放入任何dat，它只是向下延伸，它似乎有一个浮动问题：left

您需要

最好的简单方法是将

溢出：隐藏
添加到外部
：


1111
1111
1111
1111
1111
2222

另一个常见的修复方法是使用

这两种方法都可以，但是
溢出：hidden
几乎总是有效的（…除非您不想隐藏溢出），而且更简单。

<div>
    <div style="border:1px solid black;width:250px;float:left">
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
    </div>
    <div style="border:1px solid black;float:right">
        <div>2222</div>
    </div>
    <div style="clear: both;"></div>
</div>

1111
1111
1111
1111
1111
2222
确保第一个div没有那么宽

或

给第一个div a
显示：内联块；


或

使用链接样式在末尾设置一个
div
.clear{clear:both；}
添加
clear:both
，如下所示：

<div>
    <div style="border:1px solid black;width:250px;float:left">
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
    </div>
    <div style="border:1px solid black;float:right">
        <div>2222</div>
    </div>
    <div style="clear:both"></div>
</div>

<div style="width:400px; min-height=:150px; overflow: hidden;"

    <div style="width:200px; height:300px; float:left;">content goes here....</div>

    <div style="width:200px; height:300px; float:left;">content 2 goes here....</div>

</div>


1111
1111
1111
1111
1111
2222
只需在浮动div下面添加一个清晰的div：

指令：更清晰的是清晰的div[参见HTML]

-集装箱启动-

-浮动项目-

-清晰的-

-容器端-

HTML

<div style="clear: both;"></div>

清除div不是强制容器div增长的好方法

我总是这样做的：

<div>
    <div style="border:1px solid black;width:250px;float:left">
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
    </div>
    <div style="border:1px solid black;float:right">
        <div>2222</div>
    </div>
    <div style="clear:both"></div>
</div>

<div style="width:400px; min-height=:150px; overflow: hidden;"

    <div style="width:200px; height:300px; float:left;">content goes here....</div>

    <div style="width:200px; height:300px; float:left;">content 2 goes here....</div>

</div>

您可能还会发现可视化演示很有用。