css - 隐藏的 Div 未正确显示

Question

我在冷聚变循环的末尾显示隐藏的 div 时遇到问题。当我需要它显示在每一行的正下方时。你可以在下面的 URL 中看到我在说什么(点击前四种香水中任何一种下方的“了解更多”，你会看到隐藏的 div 显示在 Fleur D'Orange 香水下方。

http://www.mefragrance.com/shop.cfm?collectionid=4

我需要的是让它显示在第 1 行 4 种香水的下方。我还需要它才能在移动设备中正确显示。所以基本上我正在寻找隐藏的 div 以显示在每个单独的香水下面，但占据一行的整个宽度。

现在我在完整循环后有了 div，所以我明白为什么它会显示在所有产品的最底部。但是，当我将它移到产品循环的下方或内部时，一切都会变得不稳定，并且事情会变得很奇怪。

下面是我试过的代码，它基本上是将隐藏层放在每个 div 下方(即在每种香水下方)，这正是我想要的。问题是，不是行跨越 4 个 div，而是在每个 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>

Answer 1

你不能只用 html 和 css 来做到这一点。

您必须在每 4 个框(行)下创建一个 div，并使用 javascript 将每个框的内容显示到下面的 div 中。