为什么我的Div有空白区域

Question

我有四个浮动div，我使用div clear:both;使它们显示为四个方格，但我在我的div之间得到了这个巨大的空白区域。有人可以帮帮我吗？我真的需要显示四个框，每个框都有一个数据表。

 <form id="Form1" runat="server">
<div id="first" style = "Float:left">

      <asp:ListView ID="gridr" runat="server">
        <layouttemplate>

         <table class="table-style-two" width = "25%">
         <caption>  US RESOLUTION </caption>



            <tr runat="server">
            <th >DisputeType</th>
                <th runat="server" >REG</th>
                <th runat="server" >Fundtech</th>
                 <th runat="server" >Exceptions</th>
                <th runat="server" >OvrALL</th>
                <th runat="server">DQO</th>


            </tr>


            <tr runat="server" id="itemPlaceholder" />

          </table>

         </layouttemplate>
        <itemtemplate>
          <tr runat="server">
<td><asp:Label ID="Labeldt" runat="server"   Text='<%#Eval("disputetype") %>'  /></td>
          <td ><asp:Label ID="Labelr" runat="server"   Text='<%#Eval("REG") %>'  /></td>         
              <td><asp:Label ID="Labelf" runat="server"  Text='<%#Eval("Fundtech") %>'  /></td>
               <td><asp:Label ID="Labele" runat="server"  Text='<%#Eval("Exceptions") %>' /></td>
                <td><asp:Label ID="Labelo" runat="server"  Text='<%#Eval("OvrALL") %>' /></td>
               <td><asp:Label ID="Labeld" runat="server"  Text='<%#Eval("DQO") %>' /></td>



            </tr>



        </itemtemplate>



    </asp:ListView>

    </div><div id="second" style = "float:right">
      <asp:ListView ID="cagridres" runat="server">
        <layouttemplate>

         <table class="table-style-two"  width = "25%"  >
         <caption> CA RESOLUTION  </caption>



            <tr runat="server">
            <th >DisputeType</th>
                <th runat="server" >OvrALL</th>
                <th runat="server" >REGULAR</th>
                 <th runat="server" >EXB</th>               
                <th runat="server">EXBALL</th>
            <th runat="server">EXBALL</th>




            </tr>


            <tr runat="server" id="itemPlaceholder" />

          </table>

         </layouttemplate>
        <itemtemplate>
          <tr runat="server">
<td><asp:Label ID="Labeldt" runat="server"   Text='<%#Eval("disputetype") %>'  /></td>
          <td ><asp:Label ID="Labelr" runat="server"   Text='<%#Eval("OvrALL") %>'  /></td>      
              <td><asp:Label ID="Labelf" runat="server"  Text='<%#Eval("REG") %>'  /></td>
               <td><asp:Label ID="Labele" runat="server"  Text='<%#Eval("EXB") %>' /></td>
                <td><asp:Label ID="Labelo" runat="server"  Text='<%#Eval("EXBALL") %>' /></td>
<td><asp:Label ID="Labelte" runat="server"  Text='<%#Eval("EXBALL") %>' /></td>



            </tr>



        </itemtemplate>



    </asp:ListView>


</div><div style="clear:both"></div> <div id="third" style = "Float:left" >
         <asp:ListView ID="zipgrid" runat="server">
        <layouttemplate>

         <table class="table-style-two" width = "25%" >
         <caption> US DISPUTES </caption>


          </br></br>

            <tr runat="server">
            <th >DisputeType</th>
                <th runat="server" >Status</th>
                <th runat="server" >TTL</th>
                 <th runat="server" >Agings</th>
                <th runat="server" >BreakDown</th>
                <th runat="server">Avg</th>


            </tr>


            <tr runat="server" id="itemPlaceholder" />

          </table>

         </layouttemplate>
        <itemtemplate>
          <tr runat="server">

          <td><asp:Label ID="Labelr" runat="server"   Text='<%#Eval("DisputeType") %>' /></td>       
            <td><asp:Label ID="Label1" runat="server"   Text="Incoming" /></td>
              <td><asp:Label ID="Label2" runat="server"  Text='<%#Eval("incoming") %>'  /></td>
              <td><asp:Label ID="Label3" runat="server"    Text="AGING<6" /></td>
               <td><asp:Label ID="Label4" runat="server"  Text='<%#Eval("AGINGLT6") %>' /></td>
               <td><asp:Label ID="Label5" runat="server"  Text='<%#Eval("AVGDAYSLT6") %>' /></td>



            </tr>
            <tr>
               <td ></td>
               <td>
              <asp:Label ID="Label6" runat="server" Text="Closed" /></td>
              <td><asp:Label ID="Label7" runat="server" Text='<%#Eval("Closed") %>'  /></td>
              <td><asp:Label ID="Label8" runat="server" Text="AGING6-9" /></td>
               <td><asp:Label ID="Label9" runat="server"  Text='<%#Eval("AGING6_9")%>' /></td>
               <td><asp:Label ID="Label10" runat="server"  Text='<%#Eval("AVGDAYS6_9") %>' /></td>



            </tr>

            <tr>
            <td ></td>
               <td>
              <asp:Label ID="Label11" runat="server"  ForeColor="Black"  Text="NEW" /></td>
              <td><asp:Label ID="Label12" runat="server"  ForeColor="Black"  Text='<%#Eval("NEW") %>'  /></td>
              <td><asp:Label ID="Label13" runat="server"  ForeColor="Black"  Text="AGING10-19" /></td>
               <td><asp:Label ID="Label14" runat="server"  ForeColor="Black"  Text='<%#Eval("AGING10_19") %>' /></td>
               <td><asp:Label ID="Label15" runat="server"  ForeColor="Black"  Text='<%#Eval("AVGDAYS10_19") %>' /></td>



            </tr>

            <tr>
             <td></td>
             <td>
              <asp:Label ID="Label16" runat="server"  ForeColor="Black"  Text="open" /></td>
              <td><asp:Label ID="Label17" runat="server"  ForeColor="Black"  Text='<%#Eval("TtlOpen") %>'  /></td>
              <td><asp:Label ID="Label18" runat="server"  ForeColor="Black"  Text="AGING20-29" /></td>
               <td><asp:Label ID="Label19" runat="server"  ForeColor="Black"  Text='<%#Eval("AGING20_29") %>' /></td>
               <td><asp:Label ID="Label20" runat="server"  ForeColor="Black"  Text='<%#Eval("AVGDAYS20_29") %>' /></td>



            </tr>

            <tr>
            <td ></td>
             <td>
              <asp:Label ID="Label21" runat="server"  ForeColor="Black"  Text="AvgDays" /></td>
              <td><asp:Label ID="Label22" runat="server"  ForeColor="Black"  Text='<%#Eval("Avgdays") %>'  /></td>
              <td><asp:Label ID="Label23" runat="server"  ForeColor="Black"  Text="AGING>30" /></td>
               <td><asp:Label ID="Label24" runat="server"  ForeColor="Black"  Text='<%#Eval("AGINGGT30") %>' /></td>
               <td><asp:Label ID="Label25" runat="server"  ForeColor="Black"  Text='<%#Eval("AVGDAYSGT30") %>' /></td>


            </tr>


<td colspan = "6">

</td>

        </itemtemplate>



    </asp:ListView>
</div> <div id="fourth" style = "Float:right">
         <asp:ListView ID="CAGrid" runat="server">
        <layouttemplate>

         <table class="table-style-two" width = "25%">
         <caption> CA DISPUTES </caption>


          </br></br>

            <tr runat="server">
            <th >DisputeType</th>
                <th runat="server" >Status</th>
                <th runat="server" >TTL</th>
                 <th runat="server" >Agings</th>
                <th runat="server" >BreakDown</th>
                <th runat="server">Avg</th>


            </tr>


            <tr runat="server" id="itemPlaceholder" />

          </table>


         </layouttemplate>
        <itemtemplate>
          <tr runat="server">

          <td><asp:Label ID="Labelr" runat="server"   Text='<%#Eval("DisputeType") %>' /></td>       
            <td><asp:Label ID="Label1" runat="server"   Text="Incoming" /></td>
              <td><asp:Label ID="Label2" runat="server"  Text='<%#Eval("incoming") %>'  /></td>
              <td><asp:Label ID="Label3" runat="server"    Text="AGING<6" /></td>
               <td><asp:Label ID="Label4" runat="server"  Text='<%#Eval("AGINGLT6") %>' /></td>
               <td><asp:Label ID="Label5" runat="server"  Text='<%#Eval("AVGDAYSLT6") %>' /></td>



            </tr>
            <tr>
               <td ></td>
               <td>
              <asp:Label ID="Label6" runat="server" Text="Closed" /></td>
              <td><asp:Label ID="Label7" runat="server" Text='<%#Eval("Closed") %>'  /></td>
              <td><asp:Label ID="Label8" runat="server" Text="AGING6-9" /></td>
               <td><asp:Label ID="Label9" runat="server"  Text='<%#Eval("AGING6_9")%>' /></td>
               <td><asp:Label ID="Label10" runat="server"  Text='<%#Eval("AVGDAYS6_9") %>' /></td>



            </tr>

            <tr>
            <td ></td>
               <td>
              <asp:Label ID="Label11" runat="server"  ForeColor="Black"  Text="NEW" /></td>
              <td><asp:Label ID="Label12" runat="server"  ForeColor="Black"  Text='<%#Eval("NEW") %>'  /></td>
              <td><asp:Label ID="Label13" runat="server"  ForeColor="Black"  Text="AGING10-19" /></td>
               <td><asp:Label ID="Label14" runat="server"  ForeColor="Black"  Text='<%#Eval("AGING10_19") %>' /></td>
               <td><asp:Label ID="Label15" runat="server"  ForeColor="Black"  Text='<%#Eval("AVGDAYS10_19") %>' /></td>



            </tr>

            <tr>
             <td></td>
             <td>
              <asp:Label ID="Label16" runat="server"  ForeColor="Black"  Text="open" /></td>
              <td><asp:Label ID="Label17" runat="server"  ForeColor="Black"  Text='<%#Eval("TtlOpen") %>'  /></td>
              <td><asp:Label ID="Label18" runat="server"  ForeColor="Black"  Text="AGING20-29" /></td>
               <td><asp:Label ID="Label19" runat="server"  ForeColor="Black"  Text='<%#Eval("AGING20_29") %>' /></td>
               <td><asp:Label ID="Label20" runat="server"  ForeColor="Black"  Text='<%#Eval("AVGDAYS20_29") %>' /></td>



            </tr>

            <tr>
            <td ></td>
             <td>
              <asp:Label ID="Label21" runat="server"  ForeColor="Black"  Text="AvgDays" /></td>
              <td><asp:Label ID="Label22" runat="server"  ForeColor="Black"  Text='<%#Eval("Avgdays") %>'  /></td>
              <td><asp:Label ID="Label23" runat="server"  ForeColor="Black"  Text="AGING>30" /></td>
               <td><asp:Label ID="Label24" runat="server"  ForeColor="Black"  Text='<%#Eval("AGINGGT30") %>' /></td>
               <td><asp:Label ID="Label25" runat="server"  ForeColor="Black"  Text='<%#Eval("AVGDAYSGT30") %>' /></td>


            </tr>


<td colspan = "6">

</td>

        </itemtemplate>



    </asp:ListView>

</div>

</form>

Answer 1

您在width="25%"上设置了<table>，因此每个<div>中有75％的空白。删除宽度或将其设置为100%。