添加动态div时出现css float问题

Question

我的设计如下：

当我在任何一个块（第一个，第二个，第三个或第四个）之后添加一个新的div时，它会破坏位于它下面的div。

当我在第一个div之后添加div时，设计采用以下内容：

div的CSS规则只是：

width: 430px; margin-bottom:40px; float:left(for 1st and 3rd) or right(for 2nd and 4th)

附加的div的CSS规则：

height:20px; width:20px; clear:both; overflow:hidden

导致此问题的原因是什么？

为什么在右边放置div而不是向下滑动？

Answer 1

我建议您使用表格，您的问题将很容易完成。

Answer 2

<强> CSS：

  .div
        {
            width: 400px;
            margin: 20px;
            float: left;
            border: 1px solid #000;
        }
        .divwrapper
        {
            width: 900px;
        }

<强> HTML：

<div class="divwrapper">
        <div class="div">
            Hello 1Div
        </div>
        <div class="div">
            Hello 2Div
        </div>
        <div class="div">
            Hello 3Div
        </div>
        <div class="div">
            Hello 4Div
        </div>
    </div>

Answer 3

你应该为所有div写css，比如

div{
   width:80px;
  float:left;
  border:1px solid black;
  padding:5px;
  margin:5px;
  height:50px;
}

但是，我认为css解决方案不是简单的文字。所以

请参阅小提琴http://jsfiddle.net/pvnq8/1/