Question

我对此很新，所以我为这个稍微含糊的问题道歉。但这里有所有的信息。我正在建立一个＆＃34;网站＆＃34;为了学校。我希望我的布局在左侧显示为菜单类型的东西，右侧有两个不同的按钮，一个显示在另一个上面。我附上了一张图片，以防万一没有意义。当我float:right时，它会接近我想要的位置，但不完全正确。元素最终出现在右下角。我如何让他们做我想让他们做的事情？元素布局
first
second

Answer 1

我不确定是否理解正确，但当你说一个在另一个上面时，我认为你试图在另一个上面说一个。

让我知道如果我正确的方式：）

选中fiddle。

HTML

<div id="container">
  <div id="left-sidebar">
    <ul>
      <li>home</li>
      <li>about</li>
    </ul>
  </div>
  <div id="main">
    <div id="box">
      <p>This is a box</p>
    </div>
    <button>Button 1</button>
    <button>Button 2</button>
  </div>
</div>

CSS

#container {height: 100%;}
#left-sidebar {
  width: 120px;
  height: 400px; 
  float: left; 
  background: red; 
}
ul { margin-top: 20px; color: white;}
#main {
  width: calc(100% - 120px);
  height: 400px; 
  background: green;
  float: left;
 }
#box{
  height: 100px;
  width: 100px;
  background: white;
  padding: 20px;
  margin: 20px;
  float: left;
}
button {
  display: block;
  margin: 20px;
}

我希望这会有所帮助。

如何让CSS告诉元素出现在另一个上面？

1 个答案: