Question

所以我正在建立一个网站，我有这个特定的div，当我尝试样式化时会弄乱其余的布局，更具体地说是我拥有的水平线。 div是具有id和class查看器的div。

HTML（不含javascript）：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style_calculator.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
</head>
<body>
    <div class="lines">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
        <div class="line5"></div>
        <div class="line6"></div>
        <div class="line7"></div>
        <div class="line8"></div>
        <div class="line9"></div>
        <div class="line10"></div>
        <div class="line11"></div>
        <div class="line12"></div>
    </div>
    <div id="calculator" class="calculator">
      <div class="clear"><button id="clear" class="clear">AC</button></div>
      <div class="div"><button data-ops="divided by" class="ops">&#247</button></div>

      <div id="viewer" class="viewer">0</div>

      <div class="seven"><button class="num" data-num="7">7</button></div>
      <div class="eight"><button class="num" data-num="8">8</button></div>
      <div class="nine"><button class="num" data-num="9">9</button></div>
      <div class="multiply"><button data-ops="times" class="ops">&#215</button></div>

      <div class="four"><button class="num" data-num="4">4</button></div>
      <div class="five"><button class="num" data-num="5">5</button></div>
      <div class="six"><button class="num" data-num="6">6</button></div>
      <div class="minus"><button data-ops="minus" class="ops">-</button></div>

      <div class="one"><button class="num" data-num="1">1</button></div>
      <div class="two"><button class="num" data-num="2">2</button></div>
      <div class="three"><button class="num" data-num="3">3</button></div>
      <div class="plus"><button data-ops="plus" class="ops">+</button></div>

      <div class="zero"><button class="num" data-num="0">0</button></div>
      <div class="equal"><button id="equals" class="equals" data-result="">=</button></div>

    </div>
</body>
</html>

这是我的html和CSS的小提琴：

https://jsfiddle.net/hyk1zxmt/

谢谢！

顺便说一句，如果我有段落元素，这也会发生吗？以及如何防止这种情况发生？

Answer 1

布局中的所有div都绝对定位。那很少会结局。如果更改getContext().getResources().getString(R.string.string_name);元素的形状/大小（位于页面的顶部并且不可见）（例如，如果您摆脱了它，或者将其提高了），则会导致其他页面上绝对定位的项目也要移动。（更改div的颜色和其他非框属性似乎不会引起您描述的问题。）

由于计算器中每个数字平方div都有黑色背景色，因此白线div隐藏在黑色数字平方div后面。他们仍然在那里，你只是看不到他们。

您可以通过以下方法进行验证：将整个代码（#viewer上的黑色背景颜色除外）的黑色背景颜色更改为透明，然后从HTML中删除body div（或将其设置为{ {1}}）。然后，您仍然会看到线条，但是它们会向上移动，因为#viewer div不再占据任何垂直空间。

理想情况下，我将重新设计此代码以使用display:none，而不是尝试绝对定位正方形并在div之外创建边框。

Div搞乱了布局

1 个答案: