HTML/CSS：顯示：帶浮動或嵌入塊的塊

我有一個基本問題。
我想要兩個div彼此相鄰。我通常會在這兩個元素上使用display:block;和float:left;來做到這一點。HTML/CSS：顯示：帶浮動或嵌入塊的塊

我現在想要做的是display:inline-block;和width:60%左邊的div和width:40%右邊的div。

問題是，div的不會對齊，因爲其中一個是大的。如果我減小它的尺寸，但第二個div周圍有很多空間。
這裏是一個Fiddle：

有人能看到什麼，我做錯了什麼？

2016-01-06 Interactive

行內元素對代碼中的空白區域很敏感。取下白色空間：

<div class="wrapper"> 
    <div id="header"> 
    Header 
    </div><div id="container"> 
    Container 
    </div><div class="sidebar"> 
    Sidebar 
    </div><div id="footer"> 
    Footer 
    </div> 
</div>

jsFiddle example

來源

2016-01-06 16:32:42 j08691

與inline-block的空白會影響您的文檔的流程。

刪除這些元素上的空白。

.wrapper{ 
 
\t margin: 0 auto; 
 
\t text-align: left; 
 
\t background:#000000; 
 
} 
 

 
#header{ 
 
\t width: 100%; 
 
\t background:#00FF73; 
 
} 
 
#container{ 
 
\t width: 60%; 
 
\t display: inline-block; 
 
\t vertical-align: top; 
 
\t background:#FF0004; 
 
} 
 

 
.sidebar{ 
 
    width: 40%; 
 
    display: inline-block; 
 
\t background:#0037FF; 
 
} 
 

 
#footer{ 
 
\t width: 100%; 
 
\t background:#B400F9; 
 
}

<div class="wrapper"> 
 
\t <div id="header"> 
 
    Header 
 
\t </div> 
 
    <div id="container"> 
 
\t \t Container 
 
    </div><!-- 
 
    --><div class="sidebar"> 
 
\t Sidebar 
 
\t </div> 
 
    <div id="footer"> 
 
     Footer 
 
\t </div> 
 
    </div>

來源

2016-01-06 16:32:53 Aaron

HTML/CSS：顯示：帶浮動或嵌入塊的塊

回答

相關問題