"HTML CSS 填充 style:display = none 后的空白区域"

Question

我目前正在处理网站的 HTML 和 CSS 部分问题是，当我单击经典和高级和新鲜部分时，我必须隐藏所有其他部分例如，如果我单击经典，则高级和新鲜被隐藏，反之亦然其他。 当我点击时，我能够显示经典。 但是，问题是空间没有填满我将发布代码和案例图片

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/functions" prefix = "fn" %>
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    
<title>Menu or Content Type</title>

<style>


 
</style>


</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>





<div class="container" id="top">
    <h1>${fn:toUpperCase(content)}</h1>
    <hr>
    <c:choose>
        <c:when test="${content == 'menu'}">
        <h3>
            <span onclick="showAll('all')">Show All</span> | <span onclick="showCategory('c', 'pr', 'fr')">Classic</span> | 
            <span onclick="showCategory('pr', 'c', 'fr')">Premium</span> | <span onclick="showCategory('fr', 'c', 'pr')"> Fresh</span>
        </h3>
        </c:when>
        <c:otherwise>
        <h2>Fast-Sub</h2>
        </c:otherwise>
    </c:choose>
</div>

<div class="container" id="middle">
    <!-- Meat Board -->
        <div class="row mt-5 mb-5">
            <c:forEach items="${mList}" var="mList" varStatus="status">         
                <div class="col-lg-4 mb-4">
                <div class="card-horder">
                    <div class="card ${mList.category}">
                      <img src="images/tuna.png" class="card-img-top" height="250px">
                      <div class="card-body">
                        <p class="card-text">${mList.meat} ${mList.category}</p>
                      </div>
                      <br><br>
                    </div>
                </div>
                </div>
            </c:forEach>
        </div>
    <!-- Meat Board End -->
</div>


<script>

function display(menuCard){
    for (var i = 0; i < menuCard.length; i++){
        menuCard[i].style.display = "block";
    }
}

function hide(menuCard){
    for (var i = 0; i < menuCard.length; i++){
        menuCard[i].style.display = "none";
    }
}

function showAll(category){
    var cardC = document.getElementsByClassName("card c");
    var cardPr = document.getElementsByClassName("card pr");
    var cardFr = document.getElementsByClassName("card fr");
    
    var arrCard = [cardC, cardPr, cardFr];
    
    for(var i = 0; i < 3; i++){
        display(arrCard[i]);
    }
}

function showCategory(category, otherC1, otherC2){
    var menuCard = document.getElementsByClassName("card "+category);
    var other = document.getElementsByClassName("card "+otherC1);
    var other2 = document.getElementsByClassName("card "+otherC2);
    
    display(menuCard);
    hide(other);
    hide(other2);
    
}

</script>




</body>
</html>

Answer 1

您正在使用类卡隐藏 div。 您需要使用“col-lg-4”类隐藏 div 以填充空间。

"

"HTML CSS 填充 style:display = none 后的空白区域"

问题描述

1 个解决方案

解决方案1
0 2022-02-06 17:18:06

"HTML CSS 填充 style:display = none 后的空白区域"

问题描述

1 个解决方案

解决方案1 0 2022-02-06 17:18:06

解决方案1
0 2022-02-06 17:18:06