添加內容會更改我的代碼中的佈局。爲什麼？

以下代碼進行佈局。它非常合適，但是當我添加內容時（例如在文章標籤之間），添加內容的「框」會移動。我無法解釋，但你可以在這裏試試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>

非常感謝您的幫助！

來源

2017-01-15 David

我認爲'顯示：內聯塊;'導致此。 – klenium

正如評論所指出的那樣，使用display: inline-block會導致該問題。請記住，此顯示模式使用內嵌和塊級佈局的混合，這意味着當文本節點存在時，它將使基線與周圍文本的底部對齊。爲了規避這種情況，請使用float: left（無論如何將強制display: block）而不是使用display: inline-block。

此外，它可能更容易使用box-sizing: border-box，以便您不必手動重新計算/重新調整寬度聲明由於邊框寬度的變化。

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%; 
 
}

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

來源

2017-01-15 22:16:37 Terry

添加內容會更改我的代碼中的佈局。爲什麼？

回答

相關問題