Help with aligning the controls_问答_开发者_运维开发者技术经验分享

I have a dropdownlist (asp.net) and when user change the selection from the dropdownlist it display respected div.

i need help in aligning the controls. and want to look like this:

DropdownListControl -- > selected_div -- > button

below is my soucr code....

<div  style="width: 880px; padding-top: 2px; border-bottom: none; 
            height: 28px;"> 
            <asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label> 

          <asp:DropDownList ID="ddlFilter" runat="server" Width="221px"> 
        <asp:ListItem Text="Select..." Value=""></asp:ListItem> 
        <asp:ListItem Text="Date" Value="DATE"></asp:ListItem> 
        <asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem> 
        <asp:ListItem Text="Status" Value="STATUS"></asp:ListItem> 
    </asp:DropDownList>       


    <div id="divDateRangeSearch"> 
        <div style="float: left"> 
            <asp:Label ID="lblDateRange" runat="server" Text="Date Range"></asp:Label> 
            <br /> 
            <uc1:DatePicker ID="FromDate" runat="server"  /> 
            <uc1:DatePicker ID="ToDate" runat="server"  /> 
        </div> 
    </div> 


    <div id="divSearchSubject" > 
        <div style="float: left"> 
            <asp:Label ID="lblSubject" runat="server" Text="Subject"></asp:Label><br /> 
   开发者_如何学运维         <asp:TextBox ID="txtSubject" runat="server" Width="225px"></asp:TextBox> 
        </div> 
    </div>  


    <div id="divStatusSearch"> 
        <div style="float: left"> 
            <asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label> 
            <br /> 
            <asp:DropDownList ID="ddStatus" runat="server" Width="152px" > 
            </asp:DropDownList> 
        </div> 
    </div> 
</div>


        <asp:Button ID="btnSearch" Text="Search" runat="server" />

UPDATE:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

   <style type="text/css">


#main {
  width: 800px;    
}

#select {
  float: left;   
  width: 250px;
  border: 1px solid blue ; 
}    

#holder {
  position: relative;
  width: 300px;
  float: left;
  margin-left: 20px;
  border: 1px solid red ; 
}

#div_date, #div_subject, #div_status {
  position: absolute;
  top: 0;
  left: 0;
}

#button {
  float: left;
  margin-left:20px
}   
</style>

</head>
<body>
    <form id="form1" runat="server">



    <script type="text/javascript">

        $(document).ready(function () {

            $('#filterResultsBy').change(function () {
                var sel = $(this).val();

                $('#div_date').hide();
                $('#div_subject').hide();
                $('#div_status').hide();

                if (sel === 'Date') {
                    $('#div_date').show();
                }
                else if (sel == 'Subject') {
                    $('#div_subject').show();
                } 
                else if (sel == 'Status') {
                    $('#div_status').show();
                }
            });

        }); 

    </script>

    <div id="main"> 
       <div id="select">
            Filter Results by:
            <select id="filterResultsBy">
                <option value="">Select...</option>
                <option value="Date">Date</option>
                <option value="Subject">Subject</option>
                <option value="Status">Status</option>
            </select>
            </div>
              <div id="holder">
            <div id="div_date" style="width: 250px; display: none;" >
                Date Range: 
                 <asp:textbox width="50px" id="startdate" runat="server" /> - to -  <asp:textbox width="50px"  id="enddate" runat="server" />
            </div>

            <div id="div_subject" style="display: none;" >
                Subject: 
                <asp:TextBox ID="txtSubject" runat="server" Width="225px" ></asp:TextBox>
            </div>

                               <div id="div_status" style="display: none;" >
                Status: 
                <asp:DropDownList    ID="ddlStatus" runat="server" Width="152px">
                </asp:DropDownList>

        </div>
              </div>

               <asp:Button ID="btnSearch" Text="Search" runat="server"   />
    </div>

    </form>
</body>
</html>

Sure, not a problem. You can clean up your markup a bit on the div's that appear by removing the nested <div style="float: left">. The CSS would be as follows:

select {
    float: left;
}

#divDateRangeSearch, #divSearchSubject, #divStatusSearch, #btnSearch {
    float: left;
    margin-left: 20px; /* put some space between the elements */
}

The above assumes that you're creating and destroying the respected <div>'s as you hide and show them. If you need them to all exist in the source and you'll show and hide them, you'll need something like the following:

#divHolder {
    position: relative;
    float: left; 
    width: 200px; /* adjust as needed */
}

#divDateRangeSearch, #divSearchSubject, #divStatusSearch {
    position: absolute;
    top: 0;
    left: 0;        
}

And the HTML:

<div id="divHolder">
    <!-- Markup for the 3 divs would go in here -->
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />

Try the following. You'll have to add your other two divs back in, and I'm assuming you toggle their visibility based on selection.

<div  style="width: 880px; padding-top: 2px; border-bottom: none; 
        height: 28px;"> 

        <div style="float:left">
         <asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label> 

              <asp:DropDownList ID="ddlFilter" runat="server" Width="221px"> 
            <asp:ListItem Text="Select..." Value=""></asp:ListItem> 
            <asp:ListItem Text="Date" Value="DATE"></asp:ListItem> 
            <asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem> 
            <asp:ListItem Text="Status" Value="STATUS"></asp:ListItem> 
        </asp:DropDownList>              
        </div>



<div id="divStatusSearch"> 
    <div style="float: left"> 
        <asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label> 
        <asp:DropDownList ID="ddStatus" runat="server" Width="152px" > 
        </asp:DropDownList> 
    </div> 
</div> 
<div style="float:left">
        <asp:Button ID="btnSearch" Text="Search" runat="server" />  

</div>