Html 4个并排DIV';s未对齐为3并排DIV';在较小的屏幕上显示
好的,我会尽量把这件事说清楚 当页面为全宽时,我有4个DIV相邻。下面是另外4个同样大小的DIV以及类似的一切:Html 4个并排DIV';s未对齐为3并排DIV';在较小的屏幕上显示,html,css,alignment,Html,Css,Alignment,好的,我会尽量把这件事说清楚 当页面为全宽时,我有4个DIV相邻。下面是另外4个同样大小的DIV以及类似的一切: || | | || | | 当屏幕变小时,右边的DIV应该向下移动,这样会有3个DIV彼此相邻,下面有3个DIV彼此相邻,等等。如下所示: || | || | 现在,由于某些原因,这将无法正常工作,DIV确实会下降,但会像这样站在屏幕的右侧: || | | || | | 下面是正在使用的代码: <div class="cblock highlights i2three-high
|| | |
|| | |
当屏幕变小时,右边的DIV应该向下移动,这样会有3个DIV彼此相邻,下面有3个DIV彼此相邻,等等。如下所示:
|| |
|| |
现在,由于某些原因,这将无法正常工作,DIV确实会下降,但会像这样站在屏幕的右侧:
|| |
|
|| |
|
下面是正在使用的代码:
<div class="cblock highlights i2three-highlights-news" id="">
<div class="inner clearfix">
<div class="highlight" id="">
<div class="el-inner">
<div class="desc-news">
<div class="image-news"><a href="newsdetail.php"><img src="images/newsholder.png" alt="" /></a></div>
<div class="title">Vacature medewerker webshop</div>
<div class="text"><p> and St. Maarten. </p> <div class="learn-more-news">LEARN MORE</div>
</div>
</div>
</div>
</div>
<div class="highlight" id="">
<div class="el-inner">
<div class="desc-news">
<div class="image-news"><a href="newsdetail.php"><img src="images/newsholder.png" alt="" /></a></div>
<div class="title">Bay West Racingteam in action at the ESSF 2014</div>
<div class="text"><p> and St. Maarten. </p>
<div class="learn-more-news">LEARN MORE</div>
</div>
</div>
</div>
</div>
<div class="highlight" id="">
<div class="el-inner">
<div class="desc-news">
<div class="image-news"><a href="newsdetail.php"><img src="images/newsholder.png" alt="" /></a></div>
<div class="title">Vacature medewerker debiteurenbeheer</div>
<div class="text"><p> and St. Maarten. </p> <div class="learn-more-news">LEARN MORE</div>
</div>
</div>
</div>
</div>
<div class="highlight" id="">
<div class="el-inner">
<div class="desc-news">
<div class="image-news"><a href="newsdetail.php"><img src="images/newsholder.png" alt="" /></a></div>
<div class="title">Vacature medewerker webshop</div>
<div class="text"><p> and St. Maarten. </p> <div class="learn-more-news">LEARN MORE</div>
</div>
</div>
</div>
</div>
</div>
.highlights .highlight {
float: left;
text-align: center;}
.i2three-highlights-news {margin: auto; width:90%; background-color:white;}
.i2three-highlights-news .highlight {width: 300px; margin-left: 10px;}
.i2three-highlights-news .highlight:first-child {margin-left: 0;}
.i2three-highlights-news .highlight .el-inner {padding: 0 10px 0 0; }
.i2three-highlights-news .highlight .title, .i2three-highlights-news .highlight .title a {font-family:"Open Sans Light" 'Vollkorn', sans-serif; color: #174f6e; font-size: 24px; line-height: 1; font-weight: bold; height: 63px; margin-bottom: 20px;}
.i2three-highlights-news .highlight .title:after {width: 20px; height: 1px; display: block; content: ""; position: absolute; bottom: 0; left: 0;}
.i2three-highlights-news .highlight .text a {font-size: 15px; line-height: 21px; margin: 0 0 20px; color: #3e4856}
.highlights .highlight .image-news{width:auto; height:auto; margin-left:auto; margin-right:auto; margin-bottom:5%; border:1px solid #d1e6f7}
.hightlights .hightlight .extra-images-product{width:50px; height:50px; background-color:red;}
.extra-img{float:left; margin-left:13%;margin-top:5%;margin-bottom:5%;}
.desc-news {width:300px; height:auto; margin:auto; margin-bottom:10%;}
.highlights-news{ color: #00376D;display:block; width:100%; margin-bottom:2%;}
.learn-more-news{text-decoration:underline;}
我希望这能把问题弄清楚,任何帮助都将不胜感激 问题是由于列块的高度不一致,只需在文件中添加此js代码,这将根据其内容根据最大列的高度均衡所有列的高度 这对我很有效,希望它能解决你的问题
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var highestBox = 0;
$('.highlights .highlight').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
});
$('.highlights .highlight').height(highestBox);
});
</script>
$(文档).ready(函数(){
var-highestBox=0;
$('.highlights.highlight')。每个(函数(){
如果($(this).height()>highestBox){
highestBox=$(this).height();
}
});
$('.highlights.highlights')。高度(最高框);
});
您的第四个元素正在“捕捉”其中一个。突出显示它前面的元素,因为该元素比它后面的元素高。您是对的,在设置了highestbox函数后,它工作了:)谢谢!非常感谢!那代码正是我想要的,干杯!太棒了,当事情对我们有用时感觉很好,但当类似的事情对其他人有用时感觉真的很棒。:)