Question

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

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

问题是div之所以没有对齐，因为其中一个是大的。如果我减小一个尺寸它可以工作但是第二个div周围有很多空间这是一个Fiddle：

谁能看到我做错了什么？

微米。

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 example

Answer 2

带有内联块空格的

将影响文档的流动。

删除这些元素上的空白区域。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: