使用DIV时输出错误

Question

我试图使用Div's获得以下输出，

需要输出

Row1
  Views  Checks  Title    users
                 Topics
Row2
  Views  Checks  Title    users
                 Topics
Row3
  Views  Checks  Title    users
                 Topics

以下是我的代码，

HTML

   <div class="blockdiv" >
    <div class="views">
        TotalViews
    </div>
    <div class="answers">
        TotalAnswers
    </div>
    <div class="titles">
        title<br>
        Topic
    </div>
    <div class="user">
        UserId
    </div>
</div>

<div  class="blockdiv">
    <div class="views">
        TotalViews
    </div>
    <div class="answers">
        TotalAnswers
    </div>      
    <div class="titles">
        title<br>
        Topic           
    </div>
    <div class="user">
        UserId
    </div>
</div>

CSS

            .views{
            float:left;
            width:10;
            padding:5px;
        }

        .answers{
            float:left;
            width:10;
            padding:5px;
        }

        .titles{
            float:left;
            width:200;
            padding:5px;
        }

        .user{
            float:left;
            width:40;
            padding:5px;
        }

        #blockdiv{

        float:none;
        clear:all;
        }

当前输出

   TotalViews TotalAnswers title   UserId       TotalViews TotalAnswers title    UserId
                           Topic                                        Topic

我正在并排获得两个div。

如何让第二个div进入下一行？

谢谢

Answer 1

.blockdiv { 
    float:none;
    clear:both;
}

您还可能希望将单位添加到width

的所有实例中

Answer 2

http://jsfiddle.net/Chkug/1/

使用带

的div

clear:both 

在两个div之间，这清除了花车。

Answer 3

您的上一个css规则#blockdiv适用于id

将其更改为

.blockdiv{

        float:none;
        clear:both;
        }

DEMO

Answer 4

<div class="blockdiv">

并且您在css中使用#而不是.

#blockdiv {   
   float:none;       
   clear:all;  
}