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を並べて取得しています。

2 番目の div を次の行に移動するにはどうすればよいですか?

ありがとう

4

4 に答える 4

0

あなたの最後のcssルール#blockdivはid

に変更します

.blockdiv{

        float:none;
        clear:both;
        }

デモ

于 2012-09-14T15:19:24.947 に答える
0

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

でdivを使用する

clear:both

2 つの div の間で、フロートがクリアされます。

于 2012-09-14T15:19:17.797 に答える
0 
<div class="blockdiv">

そして、#代わりにcssで使用しています. 

#blockdiv {   
   float:none;       
   clear:all;  
}
于 2012-09-14T15:23:38.680 に答える
0 
.blockdiv { 
    float:none;
    clear:both;
}

のすべてのインスタンスにユニットを追加することもできます。width

于 2012-09-14T15:16:58.357 に答える