alignment 相关问题

当我用JS过滤卡片并隐藏其中一些卡片时，我希望剩余的卡片取代它们的位置。当我用JS过滤卡片并隐藏其中一些卡片时，我希望剩余的卡片取代它们的位置。 <div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 cards"> <?php foreach($books as $book):?> <a href="/Books/book.php?id=<?php echo $book['id']; ?>"> <div class="card hover:scale-110 transition duration-500 cursor-pointer"> <img src="<?php echo $book['img_url']; ?>" alt="Book Image" class="mb-2 rounded-md w- full h-80 object-fill"> <h2 class="font-bold mb-2 ml-2"> <?php echo $book['book_title'] ?></h2> <p class="pb-5 ml-2"> <?php echo $book['author_name']?></p> <div class="badge"> <svg class="w-5 inline-block h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" /> </svg> <span> <?php echo $book['category_title'] ?></span> </div> </div> </a> <?php endforeach; ?> </div> const buttons = document.querySelectorAll(".btn-category"); const cards = document.querySelectorAll(".card"); const showAll = document.querySelector(".show-all"); buttons.forEach((button) => { button.addEventListener("click", function () { showAll.classList.remove("bg-white", "text-green-600", "border", "btn"); button.classList.add("bg-white", "text-green-600", "border", "btn"); category = button.getAttribute("data-category").toUpperCase(); console.log(category); cards.forEach((card) => { const cardCategory = card.querySelector(".badge span").innerText; if (category === "All" || cardCategory === category) { card.style.display = "block"; } else { card.style.display = "none"; } }); }); }); 我尝试将显示更改为内联块，但没有成功。我可能会使用 flex 方法，但会使用 grid 方法。如您所见，我在 index.php 文件中使用了 tailwind。对于这个项目我只能使用JS，jQuery，不能使用React。不应该是这样的：所有卡都应该是这样的：您希望在 display: none 元素的父级 <a> 元素上切换 .card，而不是 .card 元素本身。这是因为当其子元素 <a> 设置为 .card 时，display: none 元素仍然“存在”并占用网格空间。因此，您可以将 JavaScript 稍微修改为： cards.forEach((card) => { const cardCategory = card.querySelector(".badge span").innerText; if (category === "All" || cardCategory === category) { card.parentElement.style.display = ""; } else { card.parentElement.style.display = "none"; } });

javascript grid alignment tailwind-css filtering

回答 1 投票 0

QGridLayout 中小部件的不同对齐方式

以下代码（Qt 5，与 Qt 4.8 的行为相同）使用 QGridLayout 在 QScrollArea 的上方和左侧添加小部件（稍后用作一种标题）： #包括 #

qt alignment qlayout qgridlayout

回答 3 投票 0

最大公共前景像素的图像翻译优化算法

我正在寻找一种算法来有效地确定一个 2D 图像到另一个 2D 图像的最佳平移（仅限于 x 和 y 轴，无旋转）。目标是找到最大公共像素，

java image-processing alignment registration pixel-manipulation

回答 1 投票 0

不使用布局的 QML 基线对齐

我想使用基线对齐锚点，而不使用任何花哨的 RowLayouts 等。我想使用标签的底部锚点与文本编辑的基线锚定。我想，