0

我正在尝试使用 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 转到下一行？

谢谢

4

4 回答 4

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

您可能还想为所有实例添加单位width

于 2012-09-14T15:16:58.357 回答
0

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

使用 div

clear:both

在两个 div 之间，这会清除浮动。

于 2012-09-14T15:19:17.797 回答
0

您的最后一条 CSS 规则#blockdiv适用于id

将其更改为

.blockdiv{

        float:none;
        clear:both;
        }

演示

于 2012-09-14T15:19:24.947 回答
0 
<div class="blockdiv">

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

#blockdiv {   
   float:none;       
   clear:all;  
}
于 2012-09-14T15:23:38.680 回答