1

良い。私はこれで猛烈な時間を過ごしています！

実際、まったく手がつけられません。

左側に 1 つ、右側に 1 つ、それぞれ 50% を占める 2 つの div で、ページ全体の幅を探しています。

これらの 2 つの div の上に一連の div が必要で、ページの中央に 1 つの div (div5) があります。

中央の div の両側 ページの両側の水平方向の中央に表示される固定幅の div が必要です。したがって、div3 は div1 の中心であり、div7 は div2 の中心です。

次に、これらの固定幅の div の間に、中央の div と両側の固定幅の div の間のスペースを 2 つの流動的な div で埋める必要があります。

CSS の神よ、この悪夢から私を救ってください! :D

IE6、7 のサポートは必要ありません。8が望ましいですが、面倒な場合はスキップできます。

ありがとう！

ここに画像の説明を入力

4

1 に答える 1

1

最後に...ローカルファイルからFirefox 21で動作するようにしました。何らかの理由で、Internet Explorer 8 では動作しません。幸いなことに、jQuery は必要ありません。以下のhtmlのレイアウトとともに、コード全体を投稿しています。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

body {padding: 0px; margin: 0px; border: 0px;}
div {padding: 0px; margin: 0px; border: 0px;}

#div1 {background-color: #999; min-height: 350px; width: 50%; float: left;}
#div2 {background-color: #222; min-height: 350px; width: 50%; float: left;}
#div8 {position: absolute; top: 100px;} 
#div3 {background-color: #333; min-height: 100px; width: 150px; float: left;}  
#div4 {background-color: #444; min-height: 100px; min-width: 10px; float: left;}
#div5 {background-color: #555; min-height: 100px; width: 80px; float: left;}
#div6 {background-color: #666; min-height: 100px; min-width: 10px; float: left;}
#div7 {background-color: #777; min-height: 100px; width: 150px; float: left;}

</style>
<script type='text/javascript' language='javascript'>

function center()
{
var ww = window.innerWidth;
var div8w = document.getElementById('div8').offsetWidth;
var div3w = document.getElementById('div3').offsetWidth;
var div5w = document.getElementById('div5').offsetWidth;
var div7w = document.getElementById('div7').offsetWidth;    
document.getElementById('div4').style.width = ((ww - div3w - div5w - div7w)/4)+"px";
document.getElementById('div6').style.width = ((ww - div3w - div5w - div7w)/4)+"px";    
var div4w = document.getElementById('div4').offsetWidth;
var div6w = document.getElementById('div6').offsetWidth;
divLeft = ((ww - div3w - div5w - div7w - div4w - div6w)/2);
document.getElementById('div8').style.marginLeft = divLeft+'px';
setTimeout(center, 500);
}

function rS()
{
if ((document.readyState == 'interactive') || (document.readyState == 'complete'))
  {
   center();
  }
  setTimeout(rS, 100);
}

document.onload = rS();

</script>

</head>
<body>

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div8">
    <div id="div3">div3</div>
    <div id="div4">div4</div>
    <div id="div5">div5</div>
    <div id="div6">div6</div>
    <div id="div7">div7</div>
</div>

</body>
</html>
于 2013-06-08T19:04:37.080 に答える