我正在进入网格和FLEX，并非常努力地放弃只有DIVS与浮动。有没有人知道是否有一种方法来确定（JQUERY是好的），如果一个网格布局已经折叠成一列？如果我可以告诉这一点，那么我可以做的事情，如居中它（我不想这样做，如果它是6列之一）或关闭悬停效果（这将不是真的有必要，当只有1个选择/1列相当丑陋）。我不是在寻找一个屏幕宽度的媒体查询，而是一种方法，以事实上看看它的一列或没有，无论屏幕宽度。谢谢你，谢谢
pinkon5k1#
通过比较前两个网格项的垂直位置来检查网格是否折叠成一列。如果它们的offsetTop值不同，则意味着它们位于不同的行上，表示为单列布局。
offsetTop
function checkSingleColumnGrid(gridItemSelector) { var gridItems = document.querySelectorAll(gridItemSelector); if (gridItems.length < 2) { // not enough grid items to determine the layout return false; } var firstItem = gridItems[0]; var secondItem = gridItems[1]; return firstItem.offsetTop !== secondItem.offsetTop; // compare vertical position } window.addEventListener('resize', function() { if (checkSingleColumnGrid('.grid-container > div')) { // single column } else { // multiple columns } });
字符串
mpbci0fu2#
您可以检查子宽度是否与父宽度匹配：
const grid = document.querySelector(".grid"); const isSingleColumn = grid.offsetWidth === grid.firstElementChild?.offsetWidth;
字符串只有当你没有对齐时才有效。
2条答案
按热度按时间pinkon5k1#
通过比较前两个网格项的垂直位置来检查网格是否折叠成一列。如果它们的
offsetTop值不同，则意味着它们位于不同的行上，表示为单列布局。字符串
mpbci0fu2#
您可以检查子宽度是否与父宽度匹配：
字符串
只有当你没有对齐时才有效。