Question

我为你创造了一个jsfiddle，看看我在做什么。

#page-wrapper {
margin-left: 205px;
background-color: green;
}

菜单包装器（橙色）和页面包装器（绿色）都应位于内容包装器的顶部（蓝色）。但绿色区块看起来有一个上边距（它没有）。

我的问题是：为什么橙色和绿色块都不排列在蓝色块的顶部？

我的一些CSS代码是错的吗？感谢您的投入！

Answer 1

http://codepen.io/craigiswayne/pen/mPxJqv

**使用弹性盒**

<强> CSS：

.block{
  width:100px;
  height:100px;
  background-color:#8BC34A;
}

.block.fill{
  background-color:#F44336;
  -webkit-flex: 1;
          flex: 1;
}

.container {
  display: -webkit-flex;
  display: flex;
  width:100%;
}

Answer 2

margin标记的默认p正在推动绿色div。

＆＃13;

HTML {
  background: #cccccc;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

#bounding-wrapper {
  min-width: 320px;
  width: 100%;
  padding: 10px;
}

#content-wrapper {
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: auto;
  height: auto !important;
  background-color: blue;
}

#menu-wrapper {
  width: 200px;
  background-color: orange;
  float: left;
}

#page-wrapper {
  margin-left: 205px;
  background-color: green;
}
  p{
margin: 0 0 20px;
  }

＆＃13;

<div id="bounding-wrapper">
  <div id="content-wrapper">
<div id="menu-wrapper">
  this is in the menu wrapper
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga dolores voluptatibus itaque dolor quod.</p>
</div>
<!-- menu wrapper -->
<div id="page-wrapper">
  <p>this is in the page wrapper</p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum repellendus eum delectus deserunt molestiae cum, 
</div>
<!-- page wrapper -->
  </div>
  <!-- content wrapper -->
</div>
<!-- bounding wrapper -->

＆＃13;

Answer 3

您需要浮动menu-wrapper和page-wrapper。

通过添加右侧边距，您尝试定位左侧菜单？如果是这样，你可以这样做：https://jsfiddle.net/jgoley/98abyyp2/

Answer 4

jsfiddle

#page-wrapper {
   float:left;
   background-color: green;
}

使用float：left而不是marigin left

Answer 5

我认为以下代码适合您！

我添加的所有内容为:到display: inline-block;和#menu-wrapper。

我删除的只是来自#page-wrapper的{{1}}和来自float: left;的{{1}}。

#menu-wrapper

margin-left: 205;

希望有所帮助！

Answer 6

你有两个解决方案，

您可以设置display的{{1}}属性 #page-wrapper
如果您因任何原因不想更改其display:inline-block财产您也可以display添加float:left

然后#page-wrapper

margin-left:205px

DIV不排队

6 个答案: