html - 左に浮いたものと右に浮いたものの間に div をきれいにセンタリングする

Question

他の 2 つの div の間の中央に配置したい div がある場合、1 つを左に、もう 1 つを右にフローティングし、どちらかの側 (それとその側の div の間) に正確に 10 ピクセルのマージンを与えます。ウィンドウのサイズが変更されると幅が広くなったり狭くなったりする流動的な幅ですが、両側の div との間に常に正確に 10 ピクセルの距離を維持しますか?

Answer 1

このフィドルを試してください。ソリューションは純粋な CSS で動作します。

トリックは次のとおりです。width: 230px; /* 10 more width than column size */

http://jsfiddle.net/ngdS9/1/

Answer 2

これが私の答えのフィドルです： http://jsfiddle.net/utThB/

左右divの要素が可変幅の場合、これを確認できる唯一の方法は、jQuery (または純粋な JavaScript、このバージョンについては私に尋ねてください) を介して左右の div の幅を動的に取得し、マージン スタイルを追加することです。中央のdivに。

jQuery:

$(document).ready(setWidth);
function setWidth(){
var $left_width  = $(".left").width()  + 10;
var $right_width = $(".right").width() + 10;
$(".center").css("margin-left",$left_width + 'px');
$(".center").css("margin-right",$right_width + 'px');
}

HTML:

<div class="container">
    <div class="left">Variable width DIV</div>
    <div class="right">Another.</div>
    <div class="center">Centered Div</div>
</div>

CSS:

.container{width:100%;}
.left{
float:left;
background-color:green;
}

.center{
text-align:center;
background-color:blue;
width:auto;
}

.right{
float:right;
background-color:red;
}