У меня есть правый столбец для реализации, и я решил исправить этот столбец с помощью 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>
и когда я проверяю, что между разными компонентами нет разрыва, и с моим первым блоком кода возникает пробел, я не знаю, почему.
Если бы кто-нибудь мог мне предложить мне что-то...
Вау... Я нахожу решение, которое я буду использовать в 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.