0

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

我在边距为 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 示例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 回答