1

親の中に3つの子divが並んでいます。左と右は固定幅ですが、中央は可変幅で、ブラウザでサイズを変更する必要があります。高さが異なるため、親の内側で垂直方向に整列する必要がありますが、それらを取得できず、上部にくっつきます。これを行う方法はありますか？子 div の高さは固定ですが、親の高さは可変にする必要があります。

CSS:

#divMain { width: 100%; min-width:320px; height:400px}
#div1 { width: 100px; height: 200px; float: left; red;vertical-align:middle;display:inline-block; }
#div2 { margin-left: 110px; height: 400px; margin-right: 110px; vertical-align:middle;}
#div3 { width: 100px; height:300px; float: right; vertical-align:middle;display:inline-block;}

HTML

<div id="divMain">
    <div id="div1"></div>
    <div id="div3"></div>
    <div id="div2"></div>
</div>
4

2 に答える 2

1

position: absoluteサイド divを使用してこれを実現する JS を使用しない方法を次に示します。

フィドル: http://jsfiddle.net/Xa8TW/2/

CSS

#divMain {
    width: 100%;
    min-width:320px;
    position: relative;
}
#div1 {
    width: 100px;
    height: 200px;
    background-color: red;
    position: absolute;
    top: 50%;
    margin-top: -100px;
}
#div2 {
    height: 600px;
    margin: 0 110px;
    background-color: green;
}
#div3 {
    width: 100px;
    height:300px;
    background-color: blue;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -150px;
}

HTML はそのままにしておくことができますが、特定の順序を必要とする浮動要素がないため、#div2との場所を交換することも可能になりました。#div3

于 2013-08-08T10:28:01.250 に答える
0

DIV の高さは固定されていますか? コードから見えるように、高さは 400px に固定されています。それが本当なら、解決策は非常に簡単です - margin-toptodiv1と を提供するだけdiv3です。

私はこのためのフィドルを作成し、役に立たない CSS スニペット (違いはありません) の一部も削除しました。見てください

http://jsfiddle.net/8kv2K/

于 2013-08-08T10:02:47.710 に答える