小编joe*_*e_g的帖子
jQuery砌体,百分比宽度
有没有办法让jquery砌体使用百分比宽度div？我正在尝试创建一个25%,50%,75%和100%宽度的流畅布局.但是一旦我用%设置宽度,自动调整大小就会停止工作,如果我尝试手动触发mason onresize,我会得到舍入错误,使div跳转.它有时会忽略高度变得非常错误,有时只是停止放置div并将它们全部放在0,0上
HTML标记:
<div class="boxes">
<div class="box weight-1">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-1">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-2">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-3">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div> …推荐指数
解决办法
查看次数
css网格中的自动行跨越
有没有办法获得自动行跨越（项目占用垂直网格单元的自动数量）？
在我的示例中，我希望单元格 8 自动跨越 2 个（或更多）单元格，而无需明确说span 2. 我一直在寻找如何做到这一点，但似乎不可能。
我想让每个单元格都是 100 像素的倍数，这样最小的单元格是 100 像素，如果内容溢出，它会变成 200 像素高，更多的内容是 300 像素，等等。
换句话说，我希望有一种 css 网格可以自动确定 XX 的方法：
.i { grid-row: span XX; }
.i { grid-row: span XX; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
grid-auto-flow: dense;
}
.grid div {
border-left: 1px solid #000;
border-top: 1px solid #000;
padding: 10px;
}
.grid div.i {
grid-row: span 2;
}推荐指数
解决办法
查看次数
Vue.js 通过 ..apache 热重载？
所以我的后端是基于 PHP (processwire) 的，由可信赖的旧 MAMP ( localhost:8888/mysite) 提供服务。我也想从同一台服务器上为我的 vue.js 应用程序提供服务。
npm run dev在 上启动本地服务器localhost:8080，用于执行前端工作、热重载等。
随着npm run build我可以建立我的应用程序，因此它可以从MAMP送达。
但是如何通过 MAMP 进行热重载，以便我可以继续通过 apache（使用localhost:8888/mysite）进行开发？这可能吗？
谢谢你！
推荐指数
解决办法
查看次数
在 img 上使用 object-fit 时单击图像外部的事件
我想这是不可能的，但想仔细检查：如果我有一个 object-fit:contain; 的图像 然后单击图像外部（在背景上）但仍在 img 框架内 - 有没有办法让单击事件绕过 img，就像我在 img 框架外部单击一样？
像这样吗？谢谢！
document.querySelector('.behind').addEventListener('click', e=> {
alert('this will never happen :(')
})body {
margin:0;
}
img {
width:100vw;
height:100vh;
object-fit:contain;
}
.behind {
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background-color:red;
z-index:-1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Great Demo on CodePen</title>
</head>
<body>
<div class="behind">
</div>
<div class="image">
<img src="https://picsum.photos/600/600">
</div>
</body>
</html>推荐指数
解决办法
查看次数