更改位置自定義控制器

我卡住了，我需要一些幫助來更改我的佈局頁面。這是我的實際佈局：更改位置自定義控制器

actual

我想移動的灰色成分動態離開，不使用填充左，使這樣的事情：

future

我的頁面代碼：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="FiltroOcorrencia.ascx.cs" Inherits="TelaoOcorrencia_FiltroOcorrencia" %> 

<link href="../styles/jquery.bsmselect.css" type="text/css" rel="stylesheet" /> 
<link href="TelaoOcorrencia.css" type="text/css" rel="stylesheet" /> 

<script src="../Scripts/jquery.js" type="text/javascript"></script> 
<script src="../Scripts/jquery.bsmselect.js" type="text/javascript"></script> 
<script src="../Scripts/jquery.maskedinput.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(
     function(){ 
      $("#<%= txtPlaca.ClientID %>").mask("aaa-9999"); 
     } 
    ); 
</script> 

<asp:Panel ID="pnl_principal" runat="server"> 
    <asp:Panel ID="pnl_historico_ocorrencia" runat="server" BackColor="#284e98"> 
    <asp:Label ID="lblHistoricoOcorrências" runat="server" Text="Filtro" Height="30px" ForeColor="White" style="font-family: Verdana; height: 30px; background-color: #284e98; font-size: 12pt; font-variant: small-caps"/> 
    </asp:Panel> 


    <asp:Panel BorderColor="Gray" BorderWidth="3px" ID="pnl_TipoOcorrencias" runat="server" HorizontalAlign="Left"> 

    <div style=" margin:0.5em 0.5em 0.5em 0.5em; font-family:Verdana; display:inline"> 
    <div style="margin:0.5em 0.5em 0.5em 0.5em; font-family:Verdana; font-size: 10pt; display:inline"> 
    <asp:Label ID="lblTransportadora" runat="server" Text="Transportadora: "/> 
       <asp:DropDownList ID="ddlTransportadora" Width="365px" runat="server" 
        style="font-family:Verdana; font-size: 10pt"/> 
    </div> 

    <div style="font-family:Verdana; display: inline"> 
    <asp:Label ID="lblOcorrencias" runat="server" Text="Ocorrências: " 
        style="font-size: 10pt; "></asp:Label> 
      </div> 

      <div style="font-family:Verdana;" > 
        <apisul:ApisulListBox ID="listBoxOcorrencias" runat="server" ExibeItemTodos="true" UtilizaBsmSelect="true" 
          style="font-size: 10pt;" SelectionMode="Multiple" Width="400px"></apisul:ApisulListBox> 
      </div> 

      <div style="margin:0.5em 0.5em 0.5em 0.5em; font-family:Verdana; font-size: 10pt;"> 
       <asp:Label ID="lblPlaca" runat="server" Text="Placa: "></asp:Label> 
       <asp:TextBox ID="txtPlaca" runat="server" MaxLength="7" Width="92px"></asp:TextBox> 
<%--   </div> 

      <div style="margin:0.5em 0.5em 0.5em 0.5em; font-family:Verdana; font-size: 10pt">--%> 
       <asp:CheckBox ID="chkAtualizacao" runat="server" AutoPostBack="true" 
        OnCheckedChanged="chkAtualizacao_CheckedChanged" Text="" /> 
       <asp:Label ID="lblTempoAtualizacao" runat="server" Text="Tempo de atualização: "/> 
       <asp:DropDownList ID="ddlTempoAtualizacao" Width="150" runat="server"/> 
      </div> 

      <asp:Button ID="btnPesquisar" runat="server" Text="Pesquisar" Width="130px" OnClick="btnPesquisar_Click" /> 
     </div> 

    </asp:Panel> 

    <asp:Panel ID="pnlGridOcorrencias" runat="server"> 
     <asp:GridView ID="gridOcorrencias" runat="server" 
      AlternatingRowStyle-BackColor="#E4E4E4" HeaderStyle-ForeColor="White" HeaderStyle-Font-Bold="false" 
      HeaderStyle-Font-Names="Verdana" HeaderStyle-Font-Size="10pt" HeaderStyle-BorderColor="White" 
      HeaderStyle-BackColor="Gray" AutoGenerateColumns="true" BorderColor="White" EditRowStyle-BorderColor="White" 
      RowStyle-BorderColor="White" AlternatingRowStyle-BorderColor="White" BorderStyle="None" 
      /> 
    </asp:Panel> 

</asp:Panel>

這是我的CSS組件代碼：

.bsmContainer { 
    /* container that surrounds entire bsmSelect widget */ 
    display: inline; 
} 

.bsmSelect { 
    /* the newly created regular 'select' */ 
/* display: inline;*/ 
    font-family: Verdana; 
    font-size:10pt; 
} 

.bsmOptionDisabled { 
    /* disabled options in new select */ 
    color: #999; 
} 

.bsmHighlight { 
    /* the highlight span */ 
    float: right; 
    padding: 0; 
    margin: 0 0 0 1em; 
} 

.bsmList { 
    /* html list that contains selected items */ 
    margin: 0.15em 0.25em 0.5em 0.25em; 
    position: relative; 
    display: inline-block; 
    padding-left: 0; 
    list-style: none; 
} 

.bsmListItem { 
    /* li item from the list above */ 
    position: relative; 
    margin-left: 0; 
    padding-left: 0; 
    list-style: none; 
    background: #ddd; 
    /*border: 1px solid #bbb;*/ 
    /*width: auto;*/ 
    margin: 0 0 -2px 0; 
    line-height: 0.8em; 
} 

.bsmListItem:hover { 
    background-color: #e5e5e5; 
} 

.bsmListItemLabel { 

    padding: 2px; 
    font-size: 10pt; 
    /*color: #FFFFFF;*/ 
    display: block; 
} 

.bsmListSortable .bsmListItemLabel { 
    cursor: move; 
} 

.bsmListItemRemove { 
    /* the remove link in each list item */ 
    position: absolute; 
    right: 0; 
    top: 0; 
    padding: 2px; 
} 

.bsmRemoveImgClass { 
    border-style: none; 
    margin: 2px; 
} 

.bsmScrollWorkaround { 

    padding-bottom: 1px; 
    overflow: auto; 
}

重要渲染HTML：

<div id="ctl00_ContentPlaceHolder_FiltroOcorrencia1_pnl_principal"> 


    <div id="ctl00_ContentPlaceHolder_FiltroOcorrencia1_pnl_historico_ocorrencia" style="background-color:#284E98;"> 

     <span id="ctl00_ContentPlaceHolder_FiltroOcorrencia1_lblHistoricoOcorrências" style="display:inline-block;color:White;height:30px;font-family: Verdana; height: 30px; background-color: #284e98; font-size: 12pt; font-variant: small-caps">Filtro</span> 

     </div> 


    <div id="ctl00_ContentPlaceHolder_FiltroOcorrencia1_pnl_TipoOcorrencias" style="border-color:Gray;border-width:3px;border-style:solid;text-align:left;"> 


     <div style=" margin:0.5em 0.5em 0.5em 0.5em; font-family:Verdana; display:inline"> 

      <div style="margin:0.5em 0.5em 0.5em 0.5em; font-family:Verdana; font-size: 10pt; display:inline"> 
       <span id="ctl00_ContentPlaceHolder_FiltroOcorrencia1_lblTransportadora">Transportadora: </span> 
       <select name="ctl00$ContentPlaceHolder$FiltroOcorrencia1$ddlTransportadora" id="ctl00_ContentPlaceHolder_FiltroOcorrencia1_ddlTransportadora" style="width:365px;font-family:Verdana; font-size: 10pt"> 
         <option value="0">Selecione ...</option> 
         <option value="765">MULTISAT</option> 

       </select> 
      </div> 

      <div style="font-family:Verdana; display: inline"> 
       <span id="ctl00_ContentPlaceHolder_FiltroOcorrencia1_lblOcorrencias" style="font-size: 10pt; ">Ocorrências: </span> 
      </div> 

      <div style="font-family:Verdana;" > 
        <select size="4" name="ctl00$ContentPlaceHolder$FiltroOcorrencia1$listBoxOcorrencias" multiple="multiple" id="ctl00_ContentPlaceHolder_FiltroOcorrencia1_listBoxOcorrencias" class="edicao" style="width:400px;font-size: 10pt;"> 
         <option selected="selected" value="-1">-TODOS-</option> 
         <option value="50">ACIDENTE</option> 
         <option value="49">ACIDENTE NA PISTA EM AREA DE RISCO</option> 
         <option value="6">ALERTA DE BAU</option> 
         <option value="5">ALERTA DE ENGATE</option> 
         <option value="4">ALERTA DE PORTA CABINE</option> 
         <option value="170">BANGUELA – TELEMETRIA</option> 
         <option value="2">BOTAO DE PANICO COM VEICULO EM MOVIMENTO</option> 
         <option value="1">BOTAO DE PANICO COM VEICULO PARADO</option> 
         <option value="104">BOTAO DE PANICO SEM SMP</option> 
         <option value="176">CONTROLE DE PARADAS EM SEQUENCIA</option> 
         <option value="100">DATA FIM DE VIAGEM PREVISTO VENCIDO </option> 
         <option value="154">DATA FIM DE VIAGEM PREVISTO VENCIDO (TEL)</option> 
         <option value="161">DESENGATE NAO AUTORIZADO</option> 
         <option value="71">FALHA DE COMANDO</option> 
         <option value="72">FALHA DE COMANDO NA TECNOLOGIA</option> 
         <option value="16">FIM DE VIAGEM FORA DO PONTO DE DESTINO</option> 
         <option value="58">FORA DA ROTA</option> 
         <option value="172">FRENAGEM BRUSCA – TELEMETRIA</option> 
         <option value="96">GPS SEM VISADA</option> 
         <option value="95">INICIO DE VIAGEM SEM SMP ABERTA</option> 
         <option value="60">INVERSAO DE ROTA</option> 
         <option value="48">MANUTENCAO</option> 
         <option value="166">MENSAGEM DE SOCORRO</option> 
         <option value="12">MOVIMENTACAO NAO INFORMADA</option> 
         <option value="70">NAO INICIOU VIAGEM</option> 
         <option value="153">NAO INICIOU VIAGEM (TEL)</option> 
         <option value="46">NAO PAROU PARA PERNOITE PROGRAMADO/OBRIGATORIO</option> 
         <option value="162">NAO USO DE MACROS</option> 
         <option value="23">PARADA ANTECIPADA</option> 
         <option value="22">PARADA ANTES DA KM MINIMA</option> 
         <option value="80">PARADA EM AREA PROIBIDA</option> 
         <option value="156">PARADA EM LOCAL DE RISCO</option> 
         <option value="17">PARADA EXCEDIDA</option> 
         <option value="137">PARADA EXCEDIDA POSTO FISCAL/ADUANA</option> 
         <option value="144">PARADA FORA DA REFERENCIA</option> 
         <option value="11">PARADA NAO INFORMADA</option> 
         <option value="21">PARADA NAO PERMITIDA</option> 
         <option value="83">PARADA NAO PERMITIDA NO ALVO</option> 
         <option value="42">PARADA PERNOITE ANTES KILOMETRAGEM MINIMA</option> 
         <option value="9">PERDA DE SINAL</option> 
         <option value="145">PERDA DE SINAL DO RASTREADOR MOVEL</option> 
         <option value="148">PERDA DE SINAL EM AREA DE SOMBRA</option> 
         <option value="158">PERDA DE SINAL EM PERNOITE</option> 
         <option value="18">PERNOITE EXCEDIDO</option> 
         <option value="41">PERNOITE NAO PERMITIDO</option> 
         <option value="88">PERNOITE NAO PERMITIDO NO ALVO</option> 
         <option value="165">PERSEGUICAO</option> 
         <option value="141">POSICAO DESATUALIZADA-SMP</option> 
         <option value="160">PROBLEMA NO RASTREADOR</option> 
         <option value="163">PROBLEMA NO TECLADO</option> 
         <option value="175">REIN&#205;CIO DE REFEI&#199;&#195;O ANTECIPADO</option> 
         <option value="19">REINICIO DE VIAGEM ANTECIPADO</option> 
         <option value="171">ROTA&#199;&#195;O – TELEMETRIA</option> 
         <option value="142">ROTEAMENTO</option> 
         <option value="159">ROUBO FURTO CONFIRMADO</option> 
         <option value="97">SAIDA DE ALVO SEGURO SEM SMP</option> 
         <option value="150">SAIDA DE RAIO URBANO</option> 
         <option value="157">SAIDA DE ROTA EM AREA DE RISCO</option> 
         <option value="90">SENHA DE COACAO</option> 
         <option value="101">SMP COM STATUS FIM E NAO FINALIZADA</option> 
         <option value="167">SUSPEITA DE SINISTRO</option> 
         <option value="152">TEMPO DE CONTATO EXCEDIDO</option> 
         <option value="149">TEMPO DE JORNADA EXCEDIDO</option> 
         <option value="173">TEMPO DE JORNADA EXCEDIDO – DESCANSO</option> 
         <option value="174">TEMPO DE JORNADA EXCEDIDO – PERNOITE</option> 
         <option value="164">TROCA DE MOTORISTA/CAVALO/CARRETA</option> 
         <option value="139">VALOR DE APOLICE EXCEDIDO-SMP</option> 
         <option value="81">VEICULO FORA DO GRUPO</option> 
         <option value="140">VEICULO SEM OBC ATIVO-SMP</option> 
         <option value="168">VELOCIDADE M&#193;XIMA – TELEMETRIA</option> 
         <option value="169">VELOCIDADE M&#193;XIMA NA CHUVA – TELEMETRIA</option> 
         <option value="8">VIOLACAO DE EQUIPAMENTO</option> 
         <option value="105">VIOLACAO DE EQUIPAMENTO SEM SMP</option> 
         <option value="177">VIOLADA DISTANCIA ENTRE EQUIP MOVEL E FIXO</option> 
         <option value="147">WORKFLOW DE VERIFICACAO</option> 

       </select> 
      </div> 

      <div style="margin:0.5em 0.5em 0.5em 0.5em; font-family:Verdana; font-size: 10pt;"> 
       <span id="ctl00_ContentPlaceHolder_FiltroOcorrencia1_lblPlaca">Placa: </span> 
       <input name="ctl00$ContentPlaceHolder$FiltroOcorrencia1$txtPlaca" type="text" maxlength="7" id="ctl00_ContentPlaceHolder_FiltroOcorrencia1_txtPlaca" style="width:92px;" /> 

       <input id="ctl00_ContentPlaceHolder_FiltroOcorrencia1_chkAtualizacao" type="checkbox" name="ctl00$ContentPlaceHolder$FiltroOcorrencia1$chkAtualizacao" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder$FiltroOcorrencia1$chkAtualizacao\&#39;,\&#39;\&#39;)&#39;, 0)" /> 
       <span id="ctl00_ContentPlaceHolder_FiltroOcorrencia1_lblTempoAtualizacao">Tempo de atualização: </span> 
       <select name="ctl00$ContentPlaceHolder$FiltroOcorrencia1$ddlTempoAtualizacao" id="ctl00_ContentPlaceHolder_FiltroOcorrencia1_ddlTempoAtualizacao" disabled="disabled" style="width:150px;"> 
         <option selected="selected" value="3">3 Minutos</option> 
         <option value="5">5 Minutos</option> 
         <option value="10">10 Minutos</option> 
         <option value="20">20 Minutos</option> 
         <option value="30">30 Minutos</option> 

       </select> 
      </div> 

      <input type="submit" name="ctl00$ContentPlaceHolder$FiltroOcorrencia1$btnPesquisar" value="Pesquisar" id="ctl00_ContentPlaceHolder_FiltroOcorrencia1_btnPesquisar" style="width:130px;" /> 
     </div> 


     </div>

完全呈現HTML：http://pastebin.com/41Tw7Eg3

來源

2014-01-10 guisantogui

嘗試發佈您呈現的HTML，而不是生成它的ASP。 – Palpatim