Question

以下代码进行布局。它非常适合，但是当我添加内容时（例如在文章标签之间）＆＃34;框＆＃34;在哪里我添加了内容移动。我无法解释，但你可以在这里试试https://codepen.io/davidp00/pen/XpjRgW。只是改变

<article></article>

到

<article>blabla</article>

更改布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        margin: 0;
        height: 100vh;
        width: 100vw;
    }
    /* main sections */
    header {
        height: calc(10% - 2px);
    }

    footer {
        height: calc(10% - 2px);
    }

    .container {
        height: calc(80% - 2px);
    }

    header, footer, .container {
        border: 1px solid black;
    }

    /* inside container */

    nav, article, aside {
        display: inline-block;
        border: 1px solid black;
        height: calc(100% - 2px);
        margin: 0;
        padding: 0;
    }

    article {
        width: calc(70% - 2px);
    }

    nav {
        width: calc(10% - 2px);
    }

    aside {
        width: calc(20% - 2px);
    }

    </style>
</head>
<body>
    <header></header>
    <div class="container">
        <nav></nav><!--
     --><article></article><!--
     --><aside></aside>
    </div>
    <footer></footer>
</body>
</html>

非常感谢你的帮助！

Answer 1

正如评论所指出的那样，导致问题的是使用display: inline-block。请记住，此显示模式使用内联和块级布局的混合，这意味着当存在文本节点时，它将使基线与周围文本的底部对齐。要避免这种情况，请使用float: left（无论如何都会强制display: block），而不是使用display: inline-block。

此外，使用box-sizing: border-box可能更容易，因此您不必手动重新计算/重新调整由于边框宽度更改而导致的宽度声明。

＆＃13;

body {
    margin: 0;
    height: 100vh;
    width: 100vw;
}
/* main sections */
header {
    height: 10%;
}

footer {
    height: 10%;
}

.container {
    height: 80%;
}

header, footer, .container {
    border: 1px solid black;
}

/* inside container */

nav, article, aside {
  box-sizing: border-box;
    float: left;
    border: 1px solid black;
    height: 100%;
    margin: 0;
    padding: 0;
}

article {
  background-color: red;
    width: 70%;
}

nav {
    width: 10%;
}

aside {
    width: 20%;
}

＆＃13;

<header></header>
<div class="container">
      <nav></nav><!--
   --><article>a</article><!--
   --><aside></aside>
  </div>
  <footer></footer>

＆＃13;

添加内容会更改代码中的布局。为什么？

1 个答案: