改变位置定制控制器

时间：2014-01-10 15:54:26

标签： html css css-position

我被困住了，我需要一些帮助来改变我的布局页面。 这是我的实际布局：

actual

我想动态地将灰色组件移动到左边，而不是使用padding-left，并做出类似这样的事情：

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

1 个答案:

答案 0 :(得分：0)

尝试使用css浮动：右边的todos框，然后立即添加另一个空的html div：clear：都应用于它。

相关问题
最新问题