パーセンテージで幅を制御する 2 つの div があります。右の div を左の div とまったく同じ高さにしたいのですが、左の div は、含まれる画像の幅とブラウザー ウィンドウの幅に基づいて拡大および縮小します。
JavaScriptなしでこれを達成する方法はありますか?
パーセンテージで幅を制御する 2 つの div があります。右の div を左の div とまったく同じ高さにしたいのですが、左の div は、含まれる画像の幅とブラウザー ウィンドウの幅に基づいて拡大および縮小します。
JavaScriptなしでこれを達成する方法はありますか?
これを実現する最も簡単な方法は、.right
divを絶対的に配置して設定top
し、に設定bottom
すること0
です。
親(.main
)divを相対的に配置し、すべてのフロートを削除することを忘れないでください。
.right {
bottom:0;
position: absolute;
right:0;
top: 0;
}
.main {
position: relative;
}
実例: http: //jsfiddle.net/5JU2t/1/
例で右の列が少し長くなっているのは、画像の下に空白が追加されているためです。この列の画像のみを使用している場合はfloat: left
、画像に追加してこれを解決できます。
実例: http: //jsfiddle.net/5JU2t/2/
3 番目の div でラップして、2 つの div にheight:auto
またはheight: 100%
.
親 ( .main
) を表として表示するように設定し、子 ( .right
、.left
) を表のセルとして表示するように設定します。
余分なCSSをすべてファンクして、テーブルレイアウトを使用すると思います