Question

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

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

我可能会以错误的方式接近这一点，所以我愿意采用完全不同的解决方案！

干杯。

编辑1：截图，我需要确保div角落始终相遇。

test

Answer 1

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

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

像这样......我只是没有看到另一种方式。

Answer 2

使用此代码我希望这对你有帮助

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

Answer 3

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

demo

您可以尝试将固定宽度和边距自动应用于底部div，就像使用top div一样。如果你想要他们总是内联。

谢谢

对齐位置绝对值和余量：0自动;申报单

3 个答案: