javascript - 自动排列 div,同时使一个 div 变大
问题描述
我一直在尝试创建一个画廊应用程序,其中用户将鼠标悬停在 div 上并且它变得更大但其余部分保持相同的高度。您可以在此 codepen 片段的示例中看到这种情况。
问题:问题是当我将鼠标悬停在某些 div 上时,它没有正确排列。任何人都可以帮助我做到这一点,以便没有 div 离开父 div 并填写父 div。
$( '.preview' ).on( 'mouseover', function() {
$( '.preview' ).removeClass( 'active' );
$( this ).addClass( 'active' )
}).each( function( i, el ) {
$( el ).append( '<span>' + i + '</span>' )
});
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
.main {
width: 400px;
height: 500px;
background: red;
font-size: 0;
}
.preview {
position: relative;
width: 100px;
height: 100px;
background: white;
border: 1px solid grey;
transition: width 1s;
display: inline-block;
white-space: nowrap;
vertical-align: top;
float: left;
}
.active {
width: 200px;
height: 200px;
}
.preview>span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
font-size: 32px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="preview active"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
</div>
解决方案
您可以使用 CSSGrid
布局模块:
例子:
$( '.preview' ).on( 'mouseover', function() {
$( '.preview' ).removeClass( 'active' );
$( this ).addClass( 'active' )
}).each( function( i, el ) {
$( el ).append( '<span>' + i + '</span>' )
});
.main {
width: 400px;
height: 500px;
background-color: red;
/* CSS Grid */
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto;
grid-gap: 0
}
.preview {
border: 1px solid #ddd;
background-color: #fff;
text-align: center;
font-size: 32px;
transition: all 1s
}
.active{
grid-column: span 2;
grid-row: span 2;
background-color: rgba(255, 255, 255, .9)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="preview active"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
</div>
推荐阅读
- python - 深度优先搜索的 N 拼图
- postgresql - PostgreSQL - 返回“是我的”布尔值的计算列
- mysql - 每月使用一次查询删除所有超过 30 天的行 MYSQL
- python - 可视化寻路算法
- java - 无法在 Beeware 中启动 gradle 守护进程
- java - 如何在 Firestore 的不同子集合中简化我的代码添加/更新文档?
- .htaccess - 为 seo 友好的 htaccess 重写 url
- mongodb - 通过浏览他/她的所有帖子 MongoDB 获取该用户收到的总喜欢数
- php - 通过第二台服务器从远程服务器“管道”文件内容输出到浏览器的最佳方式
- java - "/showForm" 不会重定向到页面 showForm.jsp 但 "showForm" 会