CSS“顯示：3列的行內塊”
[英]css “ display: inline-block for 3 column”
問題描述
我想知道每當我在display-inline-block CSS方法的第一列中設置寬度時，另一列將下降多少像素，但是如果我使用填充而不是寬度，則另一列將不會下降。 有人可以解釋一下為什么會這樣嗎？ 紐比在這里
第一列中使用寬度的第一張圖片
使用填充的第二張圖片
編碼
body { font-family: "Arial",Helvetica, sans-serif, serif; color: white; background: gray; margin: 0; } div.wrapper { border: 3px black dashed; } /*===============header===================*/ header.main-header { border: 2px pink dashed; } h1.main-h1 { margin: 10px 0 0 0; border: 1px black solid; text-align: center; } pp-header { font-style: italic; margin-top: 0; padding-left: 57.5%; position: absolute; top: 27px; line-height: 12px; } /*==============end of header============*/ /*==============navigation bar===========*/ nav.main-nav { border: 2px green solid; text-align: center; } pp-nav { margin: 0; right: 1%; } /*============end of navigation=========*/ /*============section===================*/ div.column { border: 2px blue dashed; } section.second-column, section.third-column, section.first-column { border: 2px brown solid; display: inline-block; height: 450px; } section.first-column { padding-right: 4%; margin-left: 1%; } section.second-column { width: 60%; margin-left: 1%; } section.third-column { width: 20%; margin-left: 1%; } /*==============footer==================*/ footer.main-footer { border: 1px white solid; text-align: center; clear: both; } /*=============end of footer===========*/
<!DOCTYPE HTML> <html lang="eng"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="_css/typhography.css"> <title>Typhography</title> </head> <body> <div class="wrapper"> <header class="main-header"> <h1 class="main-h1">Typhography</h1> <p class="p-header">learning things<br>with showe</p> </header> <nav class="main-nav"> <p class="p-nav">This is for Navigation Section</p> </nav> <div class="column"> <section class="first-column">This is first column</section> <section class="second-column">This is second column</section> <section class="third-column">This is third column</section> </div> <footer class="main-footer"> <small>this is footer</small> </footer> </div> </body> </html>
1 個解決方案
解決方案1
2 已采納 2016-02-08 08:38:25
CSS和顯示：內聯塊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.