html - 对齐绝对位置和边距 : 0 auto; divs

Question

我花了太长时间试图找出如何做到这一点!

我在边距为 0 的自动容器中有两个 float div，分别位于左上角和右上角。

我有两个绝对定位的 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 Angular 始终相交。

Answer 1

#top-left {
  background-color:yellow;
  width:68%;
  float:left;
}

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

类似这样的事情......我只是看不到另一种方式。