элементы движутся вперед в столбце

0

У меня есть правый столбец для реализации, и я решил исправить этот столбец с помощью position:relative css position:relative, чтобы поместить мои разные элементы в position:absolute внутри:

<!-- right Column   -->
<div class="col-xs-3 pl18"  style="position:relative;">

    <!-- Sans assurance -->
    <div class="row pt23 p-absolute t141"  >        
        #parse('/right-col/sans-assurance.html.vtl')
    </div><!-- end row alc mb30 -->

    <!--Tout savoir sur l'assurance Ad-valorem -->
    <div class="row  col-xs-12 info pt10 pb8 mt-7 left p-absolute t240"   >
        <p class="ml40">
            <a href="#" class="noir popup-faq" rel="38">Tout savoir sur l'assurance Ad-valorem</a>
        </p>
    </div><!--end row col-xs-12 info=(image en background)-->

    <!--    Tout savoir sur le contre-remboursement -->

    ## we display the I information when the option 335 (collect_on_delivery) is activated for the company
    #if($offre.getOption(335))
    <div class="row mb30 col-xs-12 info pt10 pb8 left mt-7"  id="collect_on_delivery" >   ##cache  style="height:50px;"                 
        <p class="ml40">
            <a href="#" class="noir popup-faq" rel="28">Tout savoir sur le contre-remboursement </a>
        </p>                                            
    </div><!--end row col-xs-12 info=(image en background)-->
    #end

    <!-- adresse-boite-postale -->
    <div class="row  pt23  p-absolute" style="top:842px;" id="adresse-boite-postale">                
        #parse('/right-col/adresse-boite-postale.html.vtl')
    </div><!-- end row alc mb30 -->

    <!-- telephone-bulle -->
    <div class="row pt23 " style="top:500px;">
        #parse('/right-col/telephone-bulle.html.vtl')
    </div><!-- end row alc mb30 -->

    <!-- informations-bordereaux -->
    <div class="row mb30 pt23 mt136 "  >                
        #parse('/right-col/informations-bordereaux.html.vtl')
    </div><!-- end row alc mb30 -->

    <!-- envoi reference interne -->
    <div class="row mb30 pt23 mt200"  >                         
        #parse('/right-col/envoi-reference-interne.html.vtl')
    </div><!-- end row alc mb30 -->

    <!-- Marchandises interdites -->
    <div class="row col-xs-12 info pt10 pb8 p-absolute left" style="top:1500px;">               
        <p class="ml40">
            <a href="#" class="noir popup-faq" rel="107">Marchandises interdites</a>
        </p>
    </div><!--end row col-xs-12 info=(image en background)-->

</div><!-- eod col-xs-3 -->
<!-- right Column   -->

Но каждый раз, когда я добавляю какой-то новый элемент в голову правого столбца, следующие элементы перемещаются вперед каждый раз, и мне это не нравится, я пытаюсь сделать код в jQuery, но на данный момент у меня нет хороших идей. Пожалуйста, не могли бы вы предложить мне некоторые идеи?

Благодарю.


Это немного странно, потому что я проверил:

<body>
    <div>Hi</div>

    <div class="row" style="position: relative;">

        <div class="col-xs-3" style="position: absolute;top:10px;" >
                    Ola
                    <img src="fig-a01a.jpg" style="height: 100px;width: 100px;">
        </div>

        <div class="col-xs-3" style="position: absolute;top:200px;">
                    querida
                    <img src="Arthur.jpg" style="height: 100px;width: 100px;">
        </div>

         <div class="col-xs-1" style="position: absolute;top:400px;">
                    sin tchao
                    <img src="c.jpg" style="height: 100px;width: 100px;">
        </div>


        <div class="col-xs-1" style="position: absolute;top: 20px;">
                    anh phuong
        </div>


        <div class="col-xs-1" style="position: absolute;">
                    princessa
        </div>

     </div>
  </body>

и когда я проверяю, что между разными компонентами нет разрыва, и с моим первым блоком кода возникает пробел, я не знаю, почему.

Если бы кто-нибудь мог мне предложить мне что-то...

Теги:

1 ответ

0

Вау... Я нахожу решение, которое я буду использовать в JQUERY:

 $("#id_of_the_component_HTML").css({left:X,top:Y});

Чтобы обнаружить наличие компонента на веб-странице:

if($('#id_of_the_component_HTML').length>0){

Так:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript">

            $(document).ready(function(){

                if($('#bea').length>0){

                    $("#position").css({left:0,top:-60});

                }

            });

 </script>                           

с:

<div class=" col-xs-3 " id="bea" style="position: absolute;top:10px;" >
                    tao
                    <img src="bea.jpg" style="">
        </div>


        <div class="col-xs-3" id="position" style="position: absolute;top:10px;" >
                    Ola
                    <img src="fig-p01a.jpg" style="height: 100px;width: 100px;">
        </div>

И я могу перемещать объект позиции ID, когда я помещаю объект ID bea.

Ale.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню