1

http://jsfiddle.net/LdTpg/3/

<div class="a">
    <div class="b">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo nunc, vehicula nec auctor a, lacinia dapibus tortor. Praesent id mi id dui sodales laoreet. Maecenas ut aliquet urna. Donec porttitor turpis eu velit viverra in tincidunt nisi viverra. Curabitur mi ligula, facilisis ut cursus vel, fermentum sit amet nibh. Ut in nisl cursus quam molestie scelerisque non a nulla. Morbi eu diam nibh, eu dictum orci. Nunc est neque, dignissim ut fermentum id, sagittis eget urna.
    </div>
    <div class="c">
        <div class="d" style="background: grey; height: 100%; width: 100%;"></div>
        <div class="e">Vertical Align This</div>
    </div>
</div>

スタイル:

​.a {
    border:1px solid red;
    overflow:hidden;
}
.a div {
    display:inline-block;
}
.b {
    width:200px;
    border:1px solid blue;
    float:left;
    position:absolute;
}
.c {
    width: 100%; 
    margin-left: 200px;        
    position:relative;
}
.d {
    position:absolute;
    top:0;
    left:0;
}
.e {
    position: relative;
}

基本的に

  • 左の div (コンテナ B) の幅はわかっていますが、高さはわかりません
  • 右側の div (コンテナ C) の幅は、残りのスペースを占有する必要があります
  • 外側のdiv（コンテナA）の高さや幅がわからない
  • 右側の div (コンテナ C) 内に要素 (コンテナ D) があり、別の要素 (コンテナ E) の下に配置する必要があります
  • コンテナ D はコンテナ C と同じ寸法にする必要があります
  • コンテナー E には、(コンテナー C に対して) 水平方向と垂直方向の両方の中央にテキストを配置する必要があります。

行の高さ、表示（インラインブロックとブロック）、高さ/幅の％、フロートなどをいじるなど、さまざまなCSS設定を試しました...

4

1 に答える 1

3

あなたが望むもののあなたの情報で C の高さがどうあるべきかは不明です（あなたはそれに対処しません）。

C が任意の場合height

このフィドルが構成されているときに実行できます（IE7 +で動作します）。

.a {
    border:1px solid red;
    overflow:hidden;
}
.a div {
    display:inline-block;
}
.b {
    width:200px;
    border:1px solid blue;
    float:left;
}
.c {
    overflow: hidden;       
    position:relative;
    height: 100px; /* arbitrary height */
    line-height: 100px; /* match arbitrary height */
    text-align: center;
}

.a .c {display: block;}

.d {
    position:absolute;
    top:0;
    left:0;
}
.e {
    position: relative;
    vertical-align: middle;
}

C が B の柔軟な高さと一致することになっている場合

これは、このフィドルが構成されているときに実行できます (IE8+ で動作します。注absolute: Chrome は、D 要素の位置を計算する方法について、Firefox および IE と比較してわずかな違いを示します)。このソリューションは、Dおよび100%のインライン スタイルを削除します。widthheight

.a {
    border:1px solid red;
    overflow:hidden;
    display: table;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 100%;
    position: relative;
}
.a div {
    display: table-cell;
}
.b {
    width:200px;
    border:1px solid blue;
}
.c {     
    text-align: center;
    vertical-align: middle;
}

.d {
    position:absolute;
    top:1px;
    right: 1px;
    bottom: 1px;
    left: 203px;
}

.a .e {
    display: inline-block;
}
.e {
    position: relative;
}
于 2012-08-04T12:53:06.393 に答える