html - 使用 DIV 时得到错误的输出

Question

我正在尝试使用 Div 获得以下输出，

需要输出

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;
        }

演示

Answer 4

<div class="blockdiv">

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

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