Question

我正在尝试在固定div旁边放一个div，但是会发生什么反而将div放在固定div中。我怎样才能将div放在固定div旁边？我知道我可以将float: right与div一起使用，但有没有一种方法可以在不使用浮点数的情况下使用inline-block？这是jsFiddle。

HTML

  <div id='column'>

  </div>
  <div id='content'>

  </div>

CSS

body {
  height: 100%;
}

#column {
  display: inline-block;
  position: fixed;
  width: 20%;
  min-height: 100%;
  background-color: red;
  vertical-align: top;
  z-index: -1;
}

#content {
  display: inline-block;
  background-color: black;
  width: 100px;
  height: 200px;
}

Answer 1

由于您的固定元素为20%宽，因此您可以使用margin-left: 20%将#content移到其右侧。

＆＃13;

body {
  height: 100%;
}

#column {
  display: inline-block;
  position: fixed;
  width: 20%;
  min-height: 100%;
  background-color: red;
  vertical-align: top;
  z-index: -1;
}

#content {
  display: inline-block;
  background-color: black;
  width: 100px;
  height: 200px;
  margin-left: 20%;
}

＆＃13;

  <div id='column'>

  </div>
  <div id='content'>

  </div>

＆＃13;

Answer 2

是的，您可以将margin-left: 20%;或margin-right: -20%用于div ID content的CSS中。但我建议你使用bootstrap，然后你可以很容易地使用它

将元素放在固定div旁边

2 个答案: