在响应式设计中在其行下显示div内容

Question

我目前有一个8格，它可以增加或减少count.Each这些div包含点击它显示内容与它有关。在固定的1024px和上面它工作正常。但问题是所有这些div都是响应式的，在较低的分辨率下，要显示的隐藏div未对齐。任何人都可以帮助我一样吗？

这是我写的HTML核心： -

 <div class="client-details fl_left" style="display: none;" 
      id="citiCab2"> 
      <span class="pointer" style="left: 73px;"></span> <a 
       class="close-button" href=""></a> 
      <div class="client-container fl_left"> 
       <a href="http://citicabsinc.com/" target="_blank"><img 
        src="images/citicabs-big.png"></a> 
      </div> 
      <div class="client-container fl_right"> 
       <h1>Citi Cabs</h1> 

       <p>The client is a progressive firm, providing eminent car rental 
        services to all kinds for travel requirements. It caters transport 
        and communication to its customers all over India.</p> 

       <p class="title">Client Requirement </p> 

       <p>The client wanted to come up with a website portal, that can be 
        navigated with ease by the visitor who is looking for the car 
        service within Bangalore and anywhere in India.</p> 

       <p class="title">Challenge</p> 

       <p>We the Maganiva Solutions Team had to predominantly understand 
        website workflow making it intuitive for the user to use it with 
        ease keeping in mind the visitor's page. </p> 

       <p class="title">What Maganiva Solutions delivered </p> 

       <p>Maganiva did a complete market study to get insights and came up 
        with a comprehensive model, wherein we not only designed the user 
        friendly website but also provided back-end support to the client 
        in Branding its online presence through SEO.</p> 
      </div> 
     </div> 

为same.Also有助于减少代码的大小，你可以看到我只是用唯一的区别一再重复相同的代码在ID的Java脚本被叫做鼠标点击到特定的div。

jQuery(function() { 
    $('#citiCab1').click(function() { 
     $(".client-details").addClass('display-none'); 
     $('#citiCab2').attr('style', function(i, style) { 
      jQuery(this).removeClass('display-none'); 
      return style.replace(/display[^;]+;?/g, ''); 
     }); 
     $("#citiCab2").addClass('display'); 
    }); 



    $('#primus1').click(function() { 
      $(".client-details").addClass('display-none'); 
      $('#primus2').attr('style', function(i, style) { 
       jQuery(this).removeClass('display-none'); 
       return style.replace(/display[^;]+;?/g, ''); 
      }); 

      $("#primus2").addClass('display'); 
     }); 

     $('#MantriEden1').click(function() { 
      $(".client-details").addClass('display-none'); 
      $('#MantriEden2').attr('style', function(i, style) { 
       jQuery(this).removeClass('display-none'); 
       return style.replace(/display[^;]+;?/g, ''); 
      }); 
      $("#MantriEden2").addClass('display'); 
     }); 

     $('#DilDaruDosti1').click(function() { 
      $(".client-details").addClass('display-none'); 
      $('#DilDaruDosti2').attr('style', function(i, style) { 
       jQuery(this).removeClass('display-none'); 
       return style.replace(/display[^;]+;?/g, ''); 
      }); 
      $("#DilDaruDosti2").addClass('display'); 
     }); 

     $('#chai1').click(function() { 
      $(".client-details").addClass('display-none'); 
      $('#chai2').attr('style', function(i, style) { 
       jQuery(this).removeClass('display-none'); 
       return style.replace(/display[^;]+;?/g, ''); 
      }); 
      $("#chai2").addClass('display'); 
     }); 

     $('#mbnt1').click(function() { 
      $(".client-details").addClass('display-none'); 
      $('#mbnt2').attr('style', function(i, style) { 
       jQuery(this).removeClass('display-none'); 
       return style.replace(/display[^;]+;?/g, ''); 
      }); 
      $("#mbnt2").addClass('display'); 
     }); 

     $('#act1').click(function() { 
      $(".client-details").addClass('display-none'); 
      $('#act2').attr('style', function(i, style) { 
       jQuery(this).removeClass('display-none'); 
       return style.replace(/display[^;]+;?/g, ''); 
      }); 
      $("#act2").addClass('display'); 
     }); 
     $('#mathru1').click(function() { 
      $(".client-details").addClass('display-none'); 
      $('#mathru2').attr('style', function(i, style) { 
       jQuery(this).removeClass('display-none'); 
       return style.replace(/display[^;]+;?/g, ''); 
      }); 
      $("#mathru2").addClass('display'); 
     }); 
    }); 

Answer 1

希望你在找什么，试试下面的html。希望它可以帮助你！

HTML：

<p><a href="JavaScript:toggleMe('desc1');"><strong>Head1</strong></a></p> 
    <div class="desc" id="desc1" style="display: none;"> 
     <h2>Description 1</h2> 
     <p>Content</p> 
     <p><a class="close" href="JavaScript:toggleMe('desc1');">Close</a></p> 
    </div> 
<p><a href="JavaScript:toggleMe('desc2');"><strong>Head2</strong></a></p> 
    <div class="desc" id="desc2" style="display: none;"> 
     <h2>Description 2</h2> 
     <p>Content</p> 
     <p><a class="close" href="JavaScript:toggleMe('desc2');">Close</a></p> 
    </div> 

CSS：

.close{ 
    text-align:right; 
    display:block; 
    padding:10px; 
} 
.desc{ 
    background:#dedede; 
    padding:10px; 
} 

脚本：

<script> 
function toggleMe(a) { 
    var e = document.getElementById(a); 
    if (!e) return true; 
    if (e.style.display == "none") { 
     e.style.display = "block" 
    } else { 
     e.style.display = "none" 
    } 
    } 
</script> 

Fiddle Demo