CSS“显示：3列的行内块”
[英]css “ display: inline-block for 3 column”
问题描述
I was wondering everytime I set a width in the first column of my display-inline-block CSS method, the other column will go down for how many pixel but if I use padding instead of width the other column will not go down. 
我想知道每当我在display-inline-block CSS方法的第一列中设置宽度时，另一列将下降多少像素，但是如果我使用填充而不是宽度，则另一列将不会下降。 Can someone explain me why is this happening? 有人可以解释一下为什么会这样吗？ NEWBIE Here 纽比在这里
The first picture using width in the first column 第一列中使用宽度的第一张图片
Second image using padding 使用填充的第二张图片
The Code 编码
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
Set vertical-align: top to your column elements. 将vertical-align: top为您的列元素。
section.second-column, section.third-column, section.first-column {
border: 2px brown solid;
display: inline-block;
height: 450px;
vertical-align: top;
}
You can read more about vertical-align here and here 您可以在此处和此处阅读有关vertical-align更多信息
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.