gpt4 book ai didi

jquery - 元素在列中向前移动

转载 作者:行者123 更新时间:2023-11-28 11:35:55 25 4
gpt4 key购买 nike

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

当我测试时,不同组件之间没有产生间隙,而我的第一个代码块却产生了间隙,我不知道为什么。

如果有人能给我建议...

最佳答案

哇...我找到了一个解决方案,我将在 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 bea的对象时,我可以移动ID位置的对象。

麦芽酒。

关于jquery - 元素在列中向前移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20928461/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com