对齐位置 absolute 和 margin: 0 auto; div答案

【问题标题】：Aligning position absolute and margin: 0 auto; divs对齐位置 absolute 和 margin: 0 auto; div
【发布时间】：2013-01-11 12:07:55
【问题描述】：

我花了太长时间试图弄清楚如何做到这一点！

我在边距为 0 的自动容器中有两个浮动 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 of example http://jsfiddle.net/JECyC/1/ 如果你改变窗口的大小，汇合点就会分开！

我可能以错误的方式处理这个问题，所以我愿意接受完全不同的解决方案！

干杯。

编辑 1：截图，我需要确保 div 的角总是相交。

【问题讨论】：

你能贴出所需输出的截图吗？
那是因为左右不是50%，因为5%的差异而漂移是“正常的”。
我在主帖里放了一张截图。
jackJoe，你知道实现这个效果的另一种方法吗？

标签： html css

【解决方案1】：

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

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

类似这样的东西......我只是没有看到其他方式。

【讨论】：

感谢您的回复，但这似乎仍然存在同样的问题。

【解决方案2】：

您的左上角和右上角具有固定宽度，但左下角和右下角具有可变宽度。所以它们永远不会内联，就好像你不断减小窗口大小一样，顶部 div 将保持原样，底部 div 的大小将不断减小，因此当两个底部 div 的宽度等于单个顶部 div n 其他 div 不是由于滚动条可见。

您可以尝试将固定宽度和边距自动应用于底部 div，就像您对顶部 div 所做的那样。如果你希望它们总是内联。

谢谢

【讨论】：

感谢您的回复，问题是我需要左下角和右下角的 div 始终触摸窗口的两侧。

【解决方案3】：

使用此代码，希望对您有所帮助

<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>

【讨论】：

感谢您的回复，但是在调整窗口大小时似乎仍然存在同样的问题。
那不行，下面的两个div需要展开到窗口的边缘，也不要使用50%的宽度。