Question

What I am trying to achieve 我有一个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

为要显示的div写：

float:left

对于正确的人：

float:right

<style>
#choose_div{
  width: 20%;
  height: auto;
  padding: 1px;
  left: 0px;
  border: 2px;
  float:left;

}
#frame_div{
  float:right;
  right:0px;
  height: auto;
  width: 80%;
  border: 2px 2px 2px 2px;
  position: relative;
}
</style>

如果添加边框，则必须缩小div的'witdh'。或者它们溢出父节并看到了顶部。

Answer 2

这是使用float:left;执行所述操作的常用方法。你的风格还有一些其他问题：

您的目标是.choose_div班级（.），而不是ID（#）
您在执行此操作时需要使用box-sizing:border-box，否则会padding和border添加到width:20%之上，使宽度大于20％。< / LI>

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可用于指示祖先的两侧。

Answer 3

    <style>
html,body{margin:0;}
#choose_div{
  display:block;
  float:left;
  width: auto;
  height: 100%;
  padding: 1px;
  }
#frame_div{
 float:right;
 height: auto;
  width: 80%;
  height: 100%;
  border: 2px 2px 2px 2px;
  border-left:solid 2px #000000;
  padding:10px;
  overflow:hidden;
}
    </style>
    <body>

      <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%">
                 </div>
          </li>
        </ul>
      </div>

    <div id="frame_div">
      <iframe id="frame_opened">
    </div>

将页面拆分为两部分

3 个答案: