在响应式设计中在其行下显示div内容
我目前有一个8格,它可以增加或减少count.Each这些div包含点击它显示内容与它有关。在固定的1024px和上面它工作正常。但问题是所有这些div都是响应式的,在较低的分辨率下,要显示的隐藏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');
});
});
希望你在找什么,试试下面的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>
我所看到的是非常相似,但不是这个。我有三个8格,他们是排列成一行,最大分辨率为280x280,分辨率为1000px及以上。随着屏幕尺寸减小,连续div的计数也会减少。我希望将内容放置在行的下方。就好像我在一行中有3个div,在另一行中有2个div一样。现在点击第一行的任何一个div,它的内容应该低于第一行,然后是第二行的内容。 – user3029113 2014-10-01 07:37:24
为什么不能分享你的确切要求的截图? – Aru 2014-10-01 08:26:00
也许flexboxes和mediaqueries就是为此而发明的。这里是一个很好的开始https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes – Winchestro 2014-10-01 06:36:00