div内のアイテムを左に移動するにはどうすればいいですか？

Question

div内にlabel、checkboxlist、およびdatagridviewがあります。私は項目を左に移動するためにインラインCSSを使用しました。しかし、私は期待どおりに動作しません。どうすればそれらを移動できますか？私はすべての3つの項目を連続して欲しい。以下は私のaspxコードを追加しました。

<div id="div2" style="width:100%; height:auto; margin-top:30px"> 
 
     <div id="div21" style="width: 50%; height:auto"> 
 
      <div id="div211" style=" width:15%; height:auto"> 
 
       <asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px"> 
 
       </asp:Label> 
 
      </div> 
 
      <div id="div212" style=" width:60%; height:auto; float:left"> 
 
       <asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server"> 
 
       </asp:CheckBoxList> 
 
      </div>         
 
     </div>   
 
     
 
     
 
     <asp:GridView ID="GridView1" runat="server" style="float:left"> 
 
      
 
     </asp:GridView> 
 
    
 
    </div>

Answer 1

あなたはdivでgridviewをラップし、そのDIVにfloat:leftを設定する必要があります。また、内部divにはfloat:leftが必要です。あなたはフロートを設定する必要があり、HTML

<div id="div2" style="width:100%; height:auto; margin-top:30px"> 
     <div id="div21" style="width: 50%; height:auto;float:left"> 
      <div id="div211" style=" width:15%; height:auto;float:left"> 
       <asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px"> 
       </asp:Label> 
      </div> 
      <div id="div212" style=" width:60%; height:auto; float:left"> 
       <asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server"> 
       </asp:CheckBoxList> 
      </div>         
     </div>   

     <div style="float:left;width:45%"> 


     <asp:GridView ID="GridView1" runat="server"> 
      <Columns> 
       <asp:TemplateField HeaderText="SomeText"> 

       </asp:TemplateField> 
      </Columns> 
     </asp:GridView> 
    </div> 
    </div> 

Answer 2

以下

試してみてください。ここでのdiv のスタイルプロパティに残って、私は単にそれ

<div id="div2" style="width:100%; height:auto; margin-top:30px; position:absolute"> 
 
     <div id="div21" style="width: 50%; height:auto"> 
 
      <div id="div211" style=" width:15%; height:auto"> 
 
       <asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:200px; position:absolute"> 
 
       </asp:Label> 
 
      </div> 
 
      <div id="div212" style=" width:60%; margin-left:200px; height:auto; float:left"> 
 
       <asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server"> 
 
       </asp:CheckBoxList> 
 
      </div>         
 
     </div>

Answer 3

場所をコピー＆ペーストしてみてくださいあなたの一例を与えますdiv内のgridviewおよびその部門のプロパティ

試してこのください。

<div id="div2" style="width: 100%; height: auto; margin-top: 30px"> 
    <div id="div21" style="width: 50%; height: auto; float: left;"> 
     <div id="div211" style="width: 15%; height: auto"> 
      <asp:Label ID="lblKPI" Text="KPI :" runat="server" Style="margin-top: 10px; margin-left: 20px"> 
      </asp:Label> 
     </div> 
     <div id="div212" style="width: 60%; height: auto; float: left"> 
      <asp:CheckBoxList ID="chklstKPI" Style="width: auto; height: auto" runat="server"> 
      </asp:CheckBoxList> 
     </div> 
    </div> 
    <div id="div22" style="width: 45%; height: auto; float: left;"> 
     <asp:GridView ID="GridView1" runat="server" Style="float: left"> 
     </asp:GridView> 
    </div> 
</div> 

Answer 4

のdiv要素にスタイルを追加してください：

<div id="div2" style="width:100%; height:auto; margin-top:30px; text-align: left;"> 
     <div id="div21" style="width: 50%; height:auto; display: inline;"> 
      <div id="div211" style=" width:15%; height:auto; display: inline;"> 
       <asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px"> 
       </asp:Label> 
      </div> 
      <div id="div212" style=" width:60%; height:auto; float:left; display: inline;"> 
       <asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server"> 
       </asp:CheckBoxList> 
      </div>         
     </div>   
     <div style="display: inline; width:50%"> 

     <asp:GridView ID="GridView1" runat="server" style="float:left"> 

     </asp:GridView> 
    </div> 
    </div>