1

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

<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;另一个会正确定位它们，但它们只是另一个底部的一个。
有人可以帮忙吗？

4

3 回答 3

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 的宽度。或者它们溢出父部分并从上到下看到。

于 2013-04-06T13:58:56.640 回答
1

这是使用float:left;. 不过，您的样式还有其他一些问题：

  • 您的目标.choose_div是类 ( .)，而不是 id ( #)
  • box-sizing:border-box执行此操作时需要使用paddingand ，否则会在宽度大于 20% 的border基础上添加。width: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。topbottom

于 2013-04-06T14:00:29.583 回答
0 
    <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>
于 2013-04-06T14:12:49.453 回答