HTML/CSS：显示：带有浮动块或内联块的块

Question

我有一个基本问题。
我想要两个 div 彼此相邻。我通常会在两个元素上使用 display:block; 和 float:left;。

我现在尝试做的是 display:inline-block; 和左边 div 的 width:60% 和右边 div 的 width:40%。

问题是 div 不会对齐，因为其中一个太大了。如果我缩小一个尺寸它会起作用但是第二个 div.
周围有很多 space 这是一个 Fiddle:

谁能看出我做错了什么？

男.

Answer 1

内联元素对代码中的白色敏感 space。去掉白色space:

<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

Answer 2

with inline-block white space 会影响文档的流向。

删除这些元素上的白色 space。

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

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

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

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

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

HTML/CSS：显示：带有浮动块或内联块的块

HTML/CSS: Display: block with a float or inline-block

html

css

display