Question

我想将2个div并排放在另一个div中。我真的不知道为什么这个橙色的＆＃34;内容＆＃34; -div低于导航。

我错在哪里？谢谢！

CSS：

#page{position:relative;width:500px;background:yellow}
#navi{position:relative;width:100px;background:red;float:left}
#content{position:relative;width:400px;background:orange;clear:left}

HTML：

<div id="page">
<div id="navi">Navi</div>
<div id="content">Content</div>
</div>

小提琴：

http://jsfiddle.net/w286e9dd/

Answer 1

#page{position:relative;width:500px;background:yellow}
#navi{width:100px;background:red;float:left}
#content{width:400px;background:orange;float:left}

就是这样......只需复制并粘贴即可。

你不小心把它弄清楚了：左边而不是漂浮：左边

Answer 2

更改CSS如下:(需要更改DIV的显示方式）

#page{position:relative;width:500px;background:yellow}

#navi{position:relative;width:100px;background:red;float:left; display: inline-block;}
#content{position:relative;width:400px;background:orange;clear:left ; display: inline-block;}

JS小提琴：http://jsfiddle.net/w286e9dd/1/

Answer 3

#content{position:relative;width:400px;background:orange;float:right}

这实现了你的目标。

Answer 4

或者您可以使用类似引导程序的媒体布局。

＆＃13;

#page {
  position: relative;
  width: 500px;
  background: yellow;
  display: table-cell;
}
#navi {
  position: relative;
  width: 100px;
  background: red;
  float: left
}
#content {
  position: relative;
  width: 400px;
  background: orange;
  display: table-cell;
}

＆＃13;

<div id="page">

  <div id="navi">Navi</div>
  <div id="content">Content</div>

</div>

＆＃13;

CSS：2个并排

4 个答案: