Question

我有3个内联<div>元素，这些元素应具有浅蓝色背景和黑色边框，但是最左边的<div>不会显示这些元素。

HTML：

<!DOCTYPE html>
</html>
    <head>
        <link rel="stylesheet" type="text/css" href="index.css" />
        <title></title>
    </head>
    <body>
        <div class="inline" "id="clicker">
            <br> Atoms: <span id="atoms">0</span>
            <br>
            <input type="image" 
src="https://theatomandperiodictable.wikispaces.com/file/view/220px- 
Stylised_Lithium_Atom.svg.png/297637780/220px-Stylised_Lithium_Atom.svg.png" 
onClick="atomClick()" width="75%" height="75%">
        </div>

        <div class="inline" id="upgrades">
            <b>upgrades</b>
            <b>text</b>
        </div>

        <div class="inline" id="modifiers">
            <button onClick="buyElement()" id="BuyElement">Buy 
Element</button>
            <br> Elements: <span id="elements">0</span>
        </div>
        <br class="clearBoth" />
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

CSS：

#clicker, #upgrades, #modifiers {
    width: 33%;
    height: 500px;
    background-color: #09a1a8;
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    text-align: center;
    margin: 4px;
    float: left;
}
/*#upgrades {
    width: 33%;
    height: 500px;
    background-color: #09a1a8;
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    text-align: center;
}*/

#upgrades button {
    width: 100px;
    height: 20px;
    margin: auto;
}

#upgrades text {
    margin: auto;
}

/*#modifiers {
    width: 33%;
    height: 500px;
    background-color: #09a1a8;
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    float: right;
    text-align: center;

}*/

#modifiers button {
    width: 100px;
    height: 20px;
    margin: auto;
    margin-top: 10px
}

 body {
    background-color: #1e1e1e;
 }

div.inline { float:left; }

需要更多文本需要更多文本需要更多文本需要更多文本需要更多文本需要更多文本需要更多文本需要更多文本需要更多文本需要更多文本需要更多文本需要更多文本需要更多文本需要更多文本需要更多文本需要更多文本

Answer 1

您将第一个div编码为<div class="inline" "id="clicker">，当它应为<div class="inline" id="clicker">时-多余的双引号会使代码变形，并使浏览器混乱。

编辑：至于全部是“内联”的，问题在于33％的人仍然没有考虑到1％。在这种情况下使用百分比还会导致严重的舍入问题（自从黎明以来，设计师的祸根），而且您还有一定的余量-通常没有考虑到这一点-3个框使用的可用宽度超过100％，迫使最后一个倒下。

我更新了代码，将其设置为30％（一个简单的示例，显示它们适合。它们可能无法完全适合所有屏幕宽度）。如果您不需要支持过时的浏览器，我还建议您调查flex-box。

#clicker, #upgrades, #modifiers {
    width: 30%; /* rounding errors cause math problems */
    height: 500px;
    background-color: #09a1a8;
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    text-align: center;
    margin: 4px;
    float: left;
}
/*#upgrades {
    width: 33%;
    height: 500px;
    background-color: #09a1a8;
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    text-align: center;
}*/

#upgrades button {
    width: 100px;
    height: 20px;
    margin: auto;
}

#upgrades text {
    margin: auto;
}

/*#modifiers {
    width: 33%;
    height: 500px;
    background-color: #09a1a8;
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    float: right;
    text-align: center;

}*/

#modifiers button {
    width: 100px;
    height: 20px;
    margin: auto;
    margin-top: 10px
}

 body {
    background-color: #1e1e1e;
 }

div.inline { float:left; }

<!DOCTYPE html>
</html>
    <head>
        <link rel="stylesheet" type="text/css" href="index.css" />
        <title></title>
    </head>
    <body>
        <div class="inline" id="clicker">
            <br> Atoms: <span id="atoms">0</span>
            <br>
            <input type="image" 
src="https://theatomandperiodictable.wikispaces.com/file/view/220px- 
Stylised_Lithium_Atom.svg.png/297637780/220px-Stylised_Lithium_Atom.svg.png" 
onClick="atomClick()" width="75%" height="75%">
        </div>

        <div class="inline" id="upgrades">
            <b>upgrades</b>
            <b>text</b>
        </div>

        <div class="inline" id="modifiers">
            <button onClick="buyElement()" id="BuyElement">Buy 
Element</button>
            <br> Elements: <span id="elements">0</span>
        </div>
        <br class="clearBoth" />
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

Answer 2

之所以会这样，是因为您直接放置文本而没有任何html标签。

尝试 <p> or <h4>

<div>背景颜色和边框不会显示

2 个答案: