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

Question

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

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

问题是 div 不会对齐，因为其中一个太大了。如果我减小它的大小，它会起作用，但是第二个 div 周围有很多空间。
这是一个小提琴：

谁能看到我做错了什么？

M。

Answer 1

内联元素对代码中的空白很敏感。删除空格：

<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 示例

Answer 2

使用 inline-block 空白将影响文档的流动。

删除这些元素上的空白。

.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>