对齐绝对位置和边距:0 auto；div
对齐绝对位置和边距:0 auto；div
提问于 2013-01-10 11:57:30
我花了太长时间试图弄清楚如何做到这一点！
我在一个边距为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;
}示例http://jsfiddle.net/JECyC/1/的JS文件如果你改变窗口的大小，会合点就会分开！
我可能以错误的方式来处理这个问题，所以我对一个完全不同的解决方案持开放态度！
干杯。
编辑1:截图，我需要确保div角总是相交的。
回答 3
Stack Overflow用户
发布于 2013-01-10 12:04:18
#top-left {
background-color:yellow;
width:68%;
float:left;
}
#top-right {
background-color:blue;
width:32%;
float:left;
}就像这样..。我就是看不到别的办法。
Stack Overflow用户
发布于 2013-01-10 12:05:44
使用这段代码，我希望这能对你有所帮助
<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>Stack Overflow用户
发布于 2013-01-10 12:23:55
左上角和右上角的宽度是固定的，而左下角和右下角的宽度是可变的。所以它们永远不会是内联的，如果你一直在缩小窗口大小，顶部div将保持原样，底部div的大小将不断减小，因此当两个底部div的宽度都等于单个顶部div时，会有点出现，其他div由于滚动条而不可见。
你可以尝试将固定宽度和边距自动应用于底部div，就像您对顶部div所做的那样。如果你想让它们始终是内联的。
谢谢
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14257414
复制相关文章
点击加载更多
相似问题
为什么我的Rails模型属性在我运行方法之后没有更新呢？
在我添加了FutureBuilder之后，ListView没有更新状态
为什么我的SwiftUI列表没有更新？
为什么我的ObservedObject应用程序中没有更新SwiftUI数组？
为什么我的下拉选项在我的Ajax调用之后在源代码中更新，而不是在UI中呢？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
