0

私はこれを行う方法を考え出すのにあまりにも長い時間を費やしました!

左上と右上のマージン 0 自動コンテナーに 2 つのフローティング div があります。

ウィンドウの両側に固定され、左下と右下のある時点で互いに交わる 2 つの絶対配置 div があります。

だから私の問題は、左上と右上のdivのミーティングポイントが常に左下と右下のミーティングポイントと一致するようにしたいということです。

HTML:

<div id="container">
 <div id="top-left">Top Left</div>
 <div id="top-right">Top Right</div>
</div>
<div id="bottom-left">Bottom Left</div>
<div id="bottom-right">Bottom Right</div>

CSS:

#bottom-left {
  position: absolute;
  left: 0;
  height: 70px;
  right: 45%;
}

#bottom-right {
  position: absolute;
  right: 0;
  height: 60px;
  left: 55%;
}

#container {
  margin: 0 auto;
  width: 200px;
  overflow: hidden;
}

#top-left {
  width: 125px;
  float: left;
}

#top-right {
  width: 75px;
  float: left;
}

例の JS Fiddle http://jsfiddle.net/JECyC/1/ウィンドウのサイズを変更すると、待ち合わせ場所がずれる!

私はこれに間違った方法でアプローチしている可能性があるため、まったく異なる解決策を受け入れます!

乾杯。

編集 1: スクリーンショット、div コーナーが常に一致するようにする必要があります。

テスト

4

3 に答える 3

0

左上と右上の幅は固定ですが、左下と右下の幅は可変です。したがって、ウィンドウのサイズを縮小し続けるかのようにインラインになることはありません。上部の div はそのままで、下部の div のサイズは縮小し続けるため、両方の下部の div の幅が単一の上部の div n と等しい場合にポイントが発生し、他の div はそうではありませんスクロールバーにより表示されます。

デモ

トップ div で行ったように、固定幅とマージンの自動をボトム div に適用してみてください。常にインラインにしたい場合。

ありがとうございました

于 2013-01-10T12:23:54.617 に答える
0 
#top-left {
  background-color:yellow;
  width:68%;
  float:left;
}

#top-right {
  background-color:blue;
  width:32%;
  float:left;
}

このようなもの...私は別の方法がわかりません。

于 2013-01-10T12:04:18.330 に答える
0

このコードを使用してください。

<html>
<head>

</head>
<body>
<div style="width:900px; margin-left:auto; margin-right:auto;">
<div  style=" width:450; height:70px;  background:yellow; float:left;">top left</div>
<div  style=" width:450; height:70px;  background:green; float:right;">top right</div>
</div>
<div  style="width:900px; margin-left:auto; margin-right:auto;">
<div  style=" width:450; height:70px; background:red; float:left;">botom left</div>
<div  style=" width:450; height:70px; background:blue; float:right;">bottom right</div>
</div>
</body>


</html>
于 2013-01-10T12:05:44.063 に答える