1

私の質問は次のようなものです。

2 つの div、一方は固定幅、もう一方は残り

ただし、答えが少し異なるいくつかの警告があります。

JavaScript を使用せずに、2 つの div を含める方法はありますか? ここで難しいのは、2 つの div の上と周囲のすべてがクリック可能であり、親 div に関連付けられている必要があることです。

これがフィドルです：http://jsfiddle.net/W7Ljd/

コードは次のとおりです。

.box {
    position: relative;
    width: 200px;
    height: 200px;
    padding: 5px;
    background:lightcoral;
}

.left {
    position: absolute; /* ------ Get Rid of these lines */
    bottom: 5px;        /* ------ */
    width: 80px;        /* ------ */
    overflow:hidden;
    height: 20px;
    background: lightyellow; /* Take up rest of space */
 }

 .right {
    float: right;
    width: 100px;
    height: 100%;
    background: lightblue;
}

赤い領域はアクセス可能な親 div である必要があり、黄色はウィンドウのサイズが変更された場合に残りの幅を占める下部にある必要があります。

ご検討いただきありがとうございます。

4

2 に答える 2

1

私はあなたのフィドルに若干の変更を加えました。

幅を削除し、代わりに左右の位置を設定すると、div はこれら 2 つのポイントの間のスペースを自動的に埋めます。右側の div は固定幅であるため、左側の div の右側の位置を、その数値に div間に必要なギャップ (および左側に作成したギャップ) を加えた値に設定できます。

position: absolute要素とその親との関係を否定しません。

于 2013-03-14T00:28:30.937 に答える
0

display: table、display: table-cellおよびを使用してみましたdisplay: table-rowか? コンテナーに table の表示値を指定し、次にそれぞれの値とyou の値を指定するleftと、コンテナーを 2 つの列に分割できます。righttable-cell

次に、左のものに追加vertical-align: bottomして、コンテンツを下に移動します。別の背景色を取得するには、別の要素を追加する必要があると思います。

この更新された fiddleを参照してください。

質問でコンテンツをどこに記入する必要があるかについて言及していないため、これがあなたのニーズに正確に適合するかどうかはわかりません.

于 2013-03-14T00:20:22.693 に答える