Question

这是从我的JavaScript生成的示例HTML。只是想知道设置display:none;将如何影响用户界面？下面是代码片段

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .card {
            display: inline-block;
            text-align: center;
            margin: 5px;
            padding: 10px;
            width: 70px;
            height: 100px;
            font-size: 26px;
            background-color: black;
            border: solid 1px black;
            color: white;
            border-radius: 10px;
        }

        .holeCard {
            /*visibility: hidden;*/
            border: solid 1px black;
            background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
        }
    </style>
</head>
<body>
    <div class="card red">
        <span class="dealerCardFace">2</span>
        <span class="dealerCardSuit">♦</span>
    </div>
    <div class="card red holeCard">
        <span class="dealerCardFace">7</span>
        <span class="dealerCardSuit">♦</span>
    </div>

</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    //$('.holeCard').eq(1).hide();
    $(".holeCard > :nth-child(1)").hide();
    $(".holeCard > :nth-child(2)").hide();
</script>

如果我删除了display:none,，则如下所示。

Answer 1

这可能是由于该块也必须共享相同的组件。但是在您的情况下，您应该使用float: left而不是inline-block

    $(".holeCard > :nth-child(1)").hide();
    $(".holeCard > :nth-child(2)").hide();

        .card {
            float: left;
            text-align: center;
            margin: 5px;
            padding: 10px;
            width: 70px;
            height: 100px;
            font-size: 26px;
            background-color: black;
            border: solid 1px black;
            color: white;
            border-radius: 10px;
        }

        .holeCard {
            /*visibility: hidden;*/
            border: solid 1px black;
            background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card red">
        <span class="dealerCardFace">2</span>
        <span class="dealerCardSuit">♦</span>
    </div>
    <div class="card red holeCard">
        <span class="dealerCardFace">7</span>
        <span class="dealerCardSuit">♦</span>
    </div>

设置css显示后：无影响布局

1 个答案: