Question

我有一个正确的列要实现，我选择使用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>

当我测试时，不同组件之间没有间隙，我的第一段代码就会产生差距，我不知道为什么。

如果有人能为我推荐一件事......

Answer 1

哇...我找到了一个解决方案，我将在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>

with：

<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 bea的对象时，我可以移动ID位置的对象。

啤酒。

这些元素在专栏中向前移动

1 个答案: