1

私が達成しようとしていること私は Facebook アプリを持っており、現在フロントエンドに取り組んでいます。私はcssとhtmlを使い始めたばかりなので、これはばかげた質問かもしれません-申し訳ありません。私がやろうとしているのは、ページを 2 つのセクションに分割することです。そのために を2 つ作成しまし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;for one とfor other が適切に配置されると思い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;。ただし、スタイルには他にもいくつかの問題がありました。

  • ID ( ) ではなく、クラス.choose_div( )をターゲットにしていました.#
  • box-sizing:border-boxそうしないと、幅を 20% より大きくする上にpaddingandが追加されます。borderwidth:20%

jsフィドル

#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:absoluteposition非静的の最も近い祖先に要素を配置します。次に、left///を使用して祖先の側面を示すことができます。righttopbottom

于 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 に答える