0

左の列、右の列、フッターの ff に分割された 3 つの div を含む div コンテナーがあります。

したがって、基本的には次のようになります。

-------------------------------
'       '                     '
'       '                     '
'       '                     '
'       '                     '
'       '                     '
'       '                     '
'       '                     '
'       '                     '
'       '                     '
-------------------------------
'                             '
'                             '
-------------------------------

左右の列には、データベースからの情報が動的に入力されます。つまり、各 div (左/右) は、ページの小さな領域または大きな領域を占める可能性があります。

しかし、私の場合、予期しない動作が発生しています。次のように、右の div が左の div のほぼ下から始まっているようです。

---------
'       '                     
'       '                     
'       '                     
'       -----------------------                     '
'       '                     '
--------'                     '
        '                     '
        '                     '
        '                     '
        '                     '
        -----------------------

つまり、右の div を左の div の上部のようにしたい場合は、常に再調整する必要がありますが、それは私がやりたいことではありません。左右の div の上部を常に同じにしたいのです。 ...以下は両方のソースです。正確な結果をすばやく確認するために、jsfiddleでこれを行うのを手伝ってくれる人はいますか?

div#divLeft
{
background-color: green;
/*height: 100%;*/
width: 25%;
float: left;
}

div#divRight
{
background-color: red;
width: 73%;
position: relative;
margin-top: -52px;
margin-left: 25%;
float: left;
}

ここに jsfiddle があります。http://jsfiddle.net/Rqyz7/ - >うまくいくことを願っています。今、ネットに問題があると思います... TIA

4

3 に答える 3

0

div列スタイル属性display:inline-block;との両方を指定し、および属性vertical-align:top;を削除します。これにより、両方がインラインで表示され、垂直方向の配置を上に定義できます。floatmargin

JSFiddle のサンプルはこちら、大きな列のサンプルはこちら

于 2012-08-05T14:45:51.637 に答える
0

基本的に、2 番目の列は 1 番目の列の間にマージンを入れようとしていて、収まらず、新しい行に移動します。2 つの方法がありますが、問題は両方を行っていることです。次のいずれか:

  • 両方の columnsfloat: leftと containeroverflow: autoを指定して、コンテナーを 2 つの中で最も高い位置まで成長させ、フッターがそれらに重ならないようにします。
  • float: left最初に を、2 番目に を与えmargin-leftます。この方法では、最初の列の高さに関係なく、フッターは 2 番目の列の後に表示されます。これは、最初の列が 2 番目の列よりも高くならない場合に使用します。

列に必要な成長動作に応じて、margin-left または float を 2 番目の div から削除します。

于 2012-08-04T18:55:18.113 に答える
0

更新されたフィドル: http://jsfiddle.net/nupul/Rqyz7/7/

基本的に、右側の div にマージンを追加すると、その幅が「合計で 75% 以上」増加します。つまりwidth:73%、margin-left:25%これにより、div の幅が許容される 75% よりも大きくなります (divLeft が 25% であるため)。マージンを修正するか、削除するか、数値をより正確にします。

2番目：フッターは、右のdivの「後」で左と右のdivの下部に流れるように、フロートをクリアする必要があります。

于 2012-08-04T18:51:17.407 に答える