1

まず第一に、実際に何が起こっているかを説明する要素の配置に関する優れたチュートリアルはありますか? 何冊も読んだのですが、よくわかりません。

私が抱えている特定の問題は次のとおりです。

ヘッダー div 要素 (赤) の下に 2 つの列 (白と緑) があります。通常は float:left; を使用します。要素を隣り合わせに配置できます。しかし今、私は 1 つ (白いもの) を、表示されているヘッダー AL の上に少し移動させたいと考えています。

負のトップ値を持つ相対的な配置では、正しい位置に白いものを取得できますが、2番目の列を配置する方法. ブラウザのサイズを調整すると、めちゃくちゃになります。

#Column1
{
  float: left;
  position: relative;
  top: -140px;
  background-color: #FFFFFF;
  left: 70px;
  width: 280px;
  min-height: 500px;
  padding: 10px;
}

#Column2
{
  float: left;   
  width: 800px;
  background-color: #00FF00;
}

グラフィカルに説明された DIV 位置

4

4 に答える 4

1

マイナスマージンを使用できます

http://jsfiddle.net/gAKAK/

于 2012-07-27T21:54:02.583 に答える
1

私はここで唾を吐くつもりです：

HTML

<div id="red"></div>
<div id="white"></div>
<div id="green"></div>

CSS

#red {
    width: 100%;
    float: left;
    height: 100px;
    position: relative;
    background-color: #f00;
}
#white {
    width: 20%;
    float: left;
    margin-left: 4%;
    margin-top: -40px;
    position: relative;
    background-color: #fff;
    height: 400px;
}
#green {
    width: 76%;
    float: left;
    position: relative;
    background-color: #0f0;
    height: 400px;
}

それは機能しますか？

于 2012-07-27T21:51:40.310 に答える
1

これはJSFiddleで、 position absoluteを使用してフロートなしのレイアウトを示しています。私の経験では、位置絶対はより柔軟で、この種のレイアウト用に作られています。特に、上、右、下、左を使用して要素をドッキングする場合はそうです。フロートの使用にフォールバックする必要がある状況もありますが、この場合は必要ありません。

フロートを使用して物を浮かせ、絶対位置に配置して物をドッキングします。

HTML

<div id="Header">header</div>
<div id="Column1">Left</div>
<div id="Column2">Right</div>

CSS

#Header {
  background-color: red;
  height: 200px;
}
#Column1 {
  position: relative;
  background-color: #FFFFFF;
  top: -140px; left: 70px;
  width: 280px;
  min-height: 500px;
}
#Column2 {
  position: absolute;   
  background-color: #00FF00;
  left: 350px; top: 200px; right: 0;
  min-height: 360px;
}​

更新JSFiddleの.moreクラスから display:none を削除し、コンテナも柔軟であることを確認します。

于 2012-07-27T22:00:41.943 に答える
0

これは一種の複雑な要求なので、理解できなくても気にしないでください。widthこのソリューションでは、サイドバー以外のものを設定する必要はありません。overflow: hidden私の解決策は、これを達成するために の珍しい使用法に依存しています。

http://jsfiddle.net/Wexcode/uBQEu/

HTML:

<div id="header"></div>
<div id="white"></div>
<div id="green"></div>

CSS:

#header { 
    background: red;
    height: 70px;
    border: 1px solid #000; }
#white {
    background: #fff;
    float: left;
    margin: -30px 0 0 70px;
    width: 100px;
    height: 230px;
    border: 1px solid #000; }
#green { 
    background: green;
    overflow: hidden; 
    height: 201px;
    border: 1px solid #000;
    border-top: 0;
    border-left: 0; }
于 2012-07-27T22:03:15.040 に答える