1

ねえ、その下のdivボックスを詳細のある上のボックスの横に置きたいのですが、絶対に配置しようとすると、なぜ（3つすべてのdivの親divをposition rlativeとして作成したのですか）、これを修正するにはどうすればよいですかまたはこれを行うための他のより良い方法。

これがスクリーンショットです - http://www.findportugal.com/Untitled.png

部門の説明

   #user_panel - div around all the other divs ie parent div
   #user_details - div with details on top
   #user_photos - div with photo heading
   #user_current - div at the lower part

CSS :

    #user_panel 
    { 
      color: white; 
      position: relative; 
    }
    #user_details 
    { 
      padding: 0 0 30px 0; 
    }
    #user_details table 
    { 
      padding: 30px 20px 10px 30px; 
      border: 1px solid grey; 
      margin: 0 60px 0 40px
    }
    #user_details table tbody tr td#right 
    { 
      padding: 0 0 0 100px; 
    }
    #users_title 
    { 
      padding: 20px 0 0 50px; 
    }

    div#user_photos 
    { 
       width: 850px; 
       height: 230px; 
       border: 1px solid grey; 
       margin: 50px 0 0 40px;
       padding: 0 0 20px 20px;  
    }

   #user_current 
   {
      border: 1px solid grey; 
      width: 320px; 
      position: absolute; 
    }
4

2 に答える 2

1

その下の div ボックスを左上の div ボックスの右側の空きスペースに配置し、実際には他のボックスと重ならないようにしたいと思いますか? その場合は、float を使用する方がよいでしょう。

HTML を表示していないので、左上のボックスの ID が「details」で、下のボックスの ID が「current-pic」で、スクリーンショットの中央にある全幅のボックスが次のようになっているとします。 「写真」のID。レイアウトを構築するための出発点は、次のようになります。

編集済み:申し訳ありませんが、質問を HTML で更新する前に回答を書きました。以下のコードは、元の html の ID を表示するように書き直されています。

HTML は次のようになります。

<div id="user_details"></div>
<div id="user_current"></div>
<div id="user_photos"></div>

基本的なレイアウト CSS は次のようになります。

#user_details {
   float: left;
   width: 50%;
   box-sizing: border-box;
   /* other styling stuff like padding, etc. */
}
#user_current {
   float: right;
   width: 50%;
   box-sizing: border-box;
   /* other styling stuff like padding, etc. */
}
#user_photos {
   clear: both;
}

これは、ボックス内のコンテンツやボックス間の間隔を考慮していませんが、box-sizingルールは、レイアウトを維持し、マージン、パディング、ボーダーを壊すことなく構築するのに役立ちます.

于 2013-03-22T18:35:21.710 に答える
1

別の div の上に div が必要であり、それは不可能であると言っています。代わりに、上部の div のサイズを小さくし、float: left;これを使用すると、フロートされた div 以外に下の div が移動します。

また、フロートをクリアすることを忘れないでください。そうしないと、要素の位置と背景色で何が起こっているのかを考えるのにあと 2 時間かかります。

また、使用したい場合position: absolute;は div がオーバーラップするため、この場合position: relative;はコンテナ要素に使用position: absolute;し、 with で使用しtop right bottom left properties to set your element correctlyます。

position: relative;そうしないと、絶対divがページで暴走することを忘れないでください

于 2013-03-22T18:21:31.330 に答える