1

中央に 1 つの div、左に 1 つ、右に 1 つの div を持つ 3 列のレイアウトを作成したいと考えています。左右の div は、中央の div からページの左右の端まで拡張する必要があります。中央の div には透明な領域を持つ要素が含まれているため、中央の div は左右の div と重なってはなりません。中央の div の幅が固定されている場合、なんとか解決策を作成できました。問題は、同様のレイアウトを作成することは可能ですが、動的な幅を持つ中央の div を使用することは可能ですか?

jsFiddle リンク

固定幅のコードは次のとおりです。

CSS:

#divCenter{
  position:absolute;
  top:0%;
  left:0;
  right:0;
  height:50px;
  width:500px;
  margin:0 auto;
  border: 1px solid #aaaaff;
  background:#aaaaff;
  z-index:2;
}
#divLeft{
  position:absolute;
  top:0;
  left:0%;
  width:50%;
  border: 1px solid #aaffaa;
  z-index:1;
}
#divLeftInner{
  height:60px;
  margin-right:250px;
  background:#aaffaa;
}
#divRight{
  position:absolute;
  top:0;
  right:0%;
  width:50%;
  border: 1px solid #ffaaaa;
  z-index:1;
}
#divRightInner{
  height:60px;
  margin-left:250px;
  background:#ffaaaa;
}

HTML:

<div id="divCenter">
</div>
<div id="divLeft">
  <div id="divLeftInner">
  </div>
</div>
<div id="divRight">
  <div id="divRightInner">
  </div>
</div>
4

1 に答える 1

1

JavaScriptを使用して、すべての列を左にフロートさせ、左と右の列を同じ幅に設定します。

HTML

<div id="wrapper">
    <div id="left" class="col"></div>
    <div id="mid" class="col"></div>
    <div id="right" class="col"></div>
</div>​

CSS

.col {float:left;height:200px;}
#left, #right {width:30%;background:red;}
#mid {width:40%;background:blue;}

jQuery

//extra verbose for clarity's sake
var setWidths = function() {
    var wrapWidth = $("#wrapper").width();
    var midWidth = $("#mid").width();
    var leftOverWidth = wrapWidth - midWidth;
    var sideColWidth = leftOverWidth/2;
    $(".sidecol").width(sideColWidth);
}

//set new sizes whenever the window is resized
$(window).on("resize", setWidths);

$(function() {
    setWidths(); //set correct sizes when the DOM has loaded
});​

http://jsfiddle.net/GYGL3/37/

于 2012-07-26T07:55:06.430 に答える