У меня проблема со скрытым div, показывающим в самом конце цикла coldfusion. Когда мне нужно, чтобы он показывался прямо под каждой отдельной строкой. Вы можете видеть, что я говорю по указанному ниже URL (нажмите «Узнать больше» под любым из 1-го четырех ароматов, вы увидите, что скрытый div показывает под ароматом Fleur D'Orange.Скрытое Div Не показано должным образом
http://www.mefragrance.com/shop.cfm?collectionid=4
Что мне нужно для того, чтобы оно отображалось под 1-м рядом 4 ароматов. Мне также понадобилось бы это, чтобы правильно отображаться на мобильных устройствах. Поэтому в основном я ищу скрытый div, чтобы показывать под каждым индивидуальным ароматом, но занимают полную ширину строки.
Прямо сейчас у меня есть div после полного цикла, поэтому я понимаю, почему он показывает его в самом низу всех продуктов. Но когда я перемещаю его под или wi тонкая петля продукта, все становится неуклюжим, и все перемещается вокруг странно.
Ниже приведен код, который я пробовал, который в основном помещает скрытый слой под каждым div (т. Е. Под каждым ароматом), чего я хочу. Проблема состоит в том, что вместо строки, идущей на 4 divs поперек, она помещает перерыв после каждого div, и у вас всего один столбец вниз. Вы можете увидеть результат здесь:
http://www.mefragrance.com/shop_test.cfm?collectionid=4
Вот код
<style>
#menu_container{
width: auto;
height: auto;
padding-left:50px;
padding-top: 20px;
}
#menu_container div {display: none;}
</style>
<div style="display: inline-block; padding-left: 15px; ">
<div style="text-align: center; padding-top: 25px;">
<img src="graphics/premixed/jasmin_epice_noir_3.4.jpg" style="max-width: 250px; height: auto;">
</div>
<div style="text-align: center; padding-top: 5px; " class="how-it-works-grey">
Jasmin Épice Noir
</div>
<div style="text-align: center; padding-top: 15px; ">
<i class="fa fa-female fa-lg"></i><img src="graphics/sex_quotient_1.png"><i class="fa fa-male fa-lg"></i>
</div>
<div style="text-align: center; padding-top: 25px;">
<a class="greenbutton-42px-high" style="text-decoration:none; min-width: 150px; color: white; " href="shop.cfm?premixedid=4&fullcollection=1&collectionid=4">SHOP PRODUCTS <i class="icon-right-open-big" style="font-weight: 500; font-size: 18px; "></i></a>
</div>
<div style="text-align: center; padding-top: 10px; padding-bottom: 0px;">
<a id="show_4" class="whitebutton-42px-high" style="text-decoration:none; min-width: 150px; " href="javascript:void(0)">LEARN MORE <i class="icon-down-open-big" style="font-weight: 500; font-size: 18px; "></i></a>
</div>
</div>
<!-- Hidden Layer -->
<div id="menu_container">
<div id="menu_4" style="padding-top: 10px; padding-bottom:20px;">
<p class="how-it-works-grey"><u>Jasmin Épice Noir</u></p>
<p style="line-height: 18px; padding-top: 0px;">An irresistible fragrance that is mysterious and intensely voluptuous. A spiced floral fragrance with a precious blend of jasmine grandiflorum absolute and rich spices. A combination of spices such as black pepper & ginger root give this fragrance a spicy mix. Includes accents of almond oil & clary sage essential oil. The fragrance is then rounded out with vanilla essential oil to let the heart notes come through and give it a rich subtle sweet scent.</p>
</div>
</div>
<!-- End Hidden Layer -->
<script>
$(document).ready(function(){
$("#nav a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#menu_container div").hide("slow");
$("#menu_container #menu_"+id[1]).show("slow");
});
});
</script>
Не могли бы вы показать, что вы пробовали? – Cleb
@ user3285739 Не могли бы вы предоставить то, что у вас есть до сих пор, а также, если возможно, рабочую копию в https://jsfiddle.net/, чтобы мы могли точно видеть, что ваша проблема – murday1983
Пожалуйста, включите [Минимальный, полный и проверенный пример] (http://stackoverflow.com/help/mcve). Вы также можете воспользоваться чтением [Как задать хороший вопрос?] (Http://stackoverflow.com/help/how-to-ask) и другие статьи справки о переполнении стека в «Asking»] (http://stackoverflow.com/help/asking). – gfullam