Html Div搞乱了布局_Html_Css - Fatal编程技术网

Html Div搞乱了布局

html css

Html Div搞乱了布局,html,css,Html,Css,因此，我正在建立一个网站，我有一个特定的div，当我尝试设计样式时，会弄乱布局的其余部分，更具体地说是我的水平线。div是具有id和类查看器的div HTML（不含javascript）：自动控制 ÷ 0 7. 8. 9 × 4. 5. 6. - 1. 2. 3. + 0 = 这里是我的html和css的一个小摆设：谢谢大家! 顺便说一句，如果我有段落元素，这种情况也会发生吗？如何防止if发生？布局中的所有div都已完全定位。这很少有好的结局。如果您更改#viewer元

因此，我正在建立一个网站，我有一个特定的div，当我尝试设计样式时，会弄乱布局的其余部分，更具体地说是我的水平线。div是具有id和类查看器的div

HTML（不含javascript）：


自动控制
÷
0
7.
8.
9
×
4.
5.
6.
-
1.
2.
3.
+
0
=

这里是我的html和css的一个小摆设：

谢谢大家!

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

布局中的所有div都已完全定位。这很少有好的结局。如果您更改

#viewer

元素的形状/大小，该元素位于页面的最顶端，不可见（例如，如果您将其去掉，或者将其加高），则会导致页面上其他绝对定位的项目也发生移动。（对div的颜色和其他非框属性的更改似乎不会导致您描述的问题。）

由于计算器中的每个数字方块div上都有一个黑色的背景色，所以白线div被隐藏在黑色数字方块div的后面。它们仍然在那里，你只是看不见而已

您可以通过将整个代码中的黑色背景颜色（除了

正文

）更改为透明，然后从HTML中删除

#查看器

div（或将其设置为

显示：无

）来验证这一点。然后您仍然可以看到行，但它们会向上移动，因为

#viewer

div不再占用任何垂直空间

理想情况下，我会重新设计此代码以使用

网格

，而不是尝试绝对定位正方形，并用div创建边框。

请在此处包含所有相关代码。准确地了解您是如何尝试设计“查看器”的？

<!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>