0

真ん中に大きな div があるページを作成しようとしています。これは、質問の最後にあるコードを使用して、左側と右側の他の div に「配置」されています。3 つの div はさらに div (outer と呼ばれる) に含まれている必要があり、その高さは (ほぼ) 中央の div の高さと同じである必要があります。中央の div の高さが固定されていないため、これは外側の div にも当てはまります。

相対位置を使用しようとすると、中央の div が左右の div の下に設定されます。中央の div の上部を設定すると、中央の div と外側の div の下の境界線の間に空白の領域が残ります。絶対配置を使用すると、外側の div が折りたたまれます。

ヒントやアドバイスをいただければ幸いです。

パラスカス

<html>
<head>
<style type="text/css">
#outer {
   width:300px;
   border:1px solid #000000;
}

#left {
   position:relative;
   display:inline-block;
   float:left;
   margin:3px;
   width:50px;
   border:1px solid #C08080;
}

#right {
   position:relative;
   display:inline-block;
   float:left;
   left:185px;
   margin:3px;
   width:50px;
   border:1px solid #C08080;
   text-align:right;
}

#middle {
    background-color: #FBE6AD;
    display: inline-block;
    overflow: hidden;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    left: 50px;
    top: -48;
    width: 200px;
}
</style>
</head>
<body>
<div id='outer'>
<div id='left'>DIV Left</div>
<div id='right'>DIV Right</div>
<div id='middle'>
DIV Middle<br>
with an<br>
unknown height<br>
which has effect on the outer height.
</div>
</div>
</body>
</html>

次のようになります。良い例え

しかし、私はこれを取得します: 悪い例

またはこれ： 悪い結果

解決策（fenixによってトリガーされた）は次のとおりです。

<html>
<head>
<style type="text/css">
#outer {
    border:1px solid #000000;
    display:inline-block;
    width:300px;
}

#x {
    display:table-row;
}

#left {
    background-color: #c0c0c0;
    position:relative;
    display:inline-block;
    float:left;
    margin:3px -5px 0px 3px;
    width:50px;
    border:1px solid #C08080;
    padding:0px;
}

#right {
    background-color: #c0c0c0;
    position:relative;
    display:inline-block;
    float:left;
    margin:3px 3px 0px -5px;
    width:50px;
    border:1px solid #C08080;
    text-align:right;
}

#middle {
    background-color: rgba(250, 220, 200, 0.8);
    display: inline-block;
    float:left;
    overflow: hidden;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    width: 200px;
    margin:3px 0px 6px 0px;
    z-index:10;
}
</style>
</head>
<body>
<div id='outer'>
<div id='x'>
<div id='left'>DIV Left</div>
<div id='middle'>
DIV Middle<br>
with an<br>
unknown height<br>
which has effect on the outer height.
</div>
<div id='right'>DIV Right</div>
</div>
</div>
</body>
</html>

これは次のように終了します。 ここに画像の説明を入力

4

2 に答える 2

1

1 つの行に 3 つのセルがあるテーブルを考えたことがありますか? 内容がどうなるかは完全にはわかりませんが、それは代替ルートになるのでしょうか?

これは1ページだけですか？それとも複数のページにまたがっていますか? 複数のページにまたがる場合、ContentPlaceHolders を反映した関連するスタイルを持つマスター ページを利用できますか?

于 2013-07-22T22:13:41.480 に答える