css - 将页面分成两部分

Question

我有一个 facebook 应用程序，我现在正在从事前端工作。我刚刚开始使用 css 和 html，所以这可能是一个愚蠢的问题 - 对此感到抱歉。 我要做的是将页面分成两部分。我为此创建了两个 div，但问题在于它们的定位方式。我的代码如下:

<style>
.choose_div{
  width: 20%;
  height: auto;
  padding: 1px;
  left: 0px;
  border: 2px;
}
.frame_div{
  right:0px;
  height: auto;
  width: 80%;
  border: 2px 2px 2px 2px;
  position: relative;
}
</style>
  <div id="choose_div">
    <ul>
      <li class="li_choose">
        <div class="li_div">
          <p>Save</p>
            <img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
           <hr>
        </div>
      </li>
    </ul>
  </div>
<div id="frame_div">
  <iframe id="frame_opened">
</div>

我认为 right:0px; 一个和 left:0px; 另一个会正确定位它们，但它们只是一个在另一个的底部.
任何人都可以帮忙吗？

Answer 1

这是使用 float:left; 执行您要求的正常方法。不过，您的样式还有一些其他问题:

• 您的目标是 .choose_div 类 (.)，而不是 id (#)
• 执行此操作时需要使用 box-sizing:border-box 否则 padding 和 border 会添加到顶部width:20% 使宽度大于 20%。

jsFiddle

#choose_div {
    width: 20%;
    height: auto;
    padding: 1px;
    border: 2px;
    float:left;
    box-sizing:border-box;
}
#frame_div {
    height: auto;
    width: 80%;
    border: 2px 2px 2px 2px;
    float:left;
    box-sizing:border-box;
}

至于 left 和 right，如果使用 position:absolute，它们可用于对齐到屏幕的特定一侧。 position:relative 只是将元素移动一个特定的量，例如 left:2px 会将元素向左移动 2 个像素。

position:absolute 将元素定位在其最近的具有非静态 position 的祖先上。那么可以用left/right/top/bottom来表示祖先的边。