CSS поплавок проблема при добавлении динамически Див

Question

У меня есть дизайн, как следующая строка:

Когда я добавляю новый DIV после любого блока (1-я, 2-й, 3-й или 4-й), он ломает DIV который расположен под ним.

Когда я добавить DIV после 1 DIV, дизайн принимает следующее:

правило CSS из див просто:

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

CSS правила DIV, который прилагаемые:

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

В чем причина этой проблемы?

Почему нижнее разделение позиции справа, а не скольжение вниз?

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

вы должны написать CSS для всех Див как

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

, но, я думаю, CSS решение не дают по простой текст. поэтому

см. скрипку http://jsfiddle.net/pvnq8/1/