帮助对齐控件

我有一个下拉列表（asp.net），当用户从下拉列表中更改选择时，它会显示受尊重的div。帮助对齐控件

我需要帮助对齐控件。并希望是这样的：

DropdownListControl - > selected_div - >按钮

下面是我的soucr代码....

<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>

来源

2010-07-23 Nick Kahn

当然，不是问题。你可以通过删除嵌套的<div style="float: left">来清除你的标记。 CSS的情况如下：

select { 
    float: left; 
} 

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

上述假设您正在创建和你隐藏和显示他们摧毁推崇<div>的。如果你需要他们的所有源存在，你会显示和隐藏它们，你需要像下面这样：

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

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

和HTML：

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

来源

2010-07-23 21:17:28 Pat

Pat，你是正确的，我显示基于从dropdownlist选择div，我已经尝试过你的解决方案，但不工作，我试过你的第一个解决方案，选择{float：left} – 2010-07-23 21:29:43

看看这个jsfiddle：http ：//jsfiddle.net/xvQwx/如果您注意到，状态和日期过滤器相互重叠。你在这个例子中所要做的就是根据过滤器下拉菜单来显示/隐藏正确的Javascript代码。如果布局不在代码中使用float，请检查元素是否比浮动容器更宽，因为这会导致浮动下拉并破坏布局。 – Pat 2010-07-23 22:29:59

很奇怪，如果我删除边框：1px纯红色;和边框：1px纯蓝色;比一切都重叠在一起，如果我把它放回一切看起来不错。你知道可能是什么问题，我已经更新了这个问题。 – 2010-07-24 02:03:45

请尝试以下操作。您必须重新添加其他两个div，并且我假设您根据选择切换其可见性。

<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>

来源

2010-07-23 21:15:38 MCain

它没有工作， div_date只是从左到右移动，但仍然不像我想要的那样对齐。 – 2010-07-23 21:21:40

帮助对齐控件

回答

相关问题