如何让DIV粘在一个固定宽度的元素的边上
我有一个带有填充和固定宽度的侧边栏的流体内容区域。我想要float: right一个图像，并给它一个等于容器的padding的负margin-right，以使浮动的图像与侧边栏相邻。
代码胜过千言万语……
这里有一个显示问题的简化测试用例：http://jsfiddle.net/alexdunae/34ZDw/3/ --收缩或展开预览窗格以查看。
看起来我的负保证金计算一定是有偏差的。任何帮助都是非常感谢的。
回答 2
Stack Overflow用户
发布于 2011-12-08 13:15:41
在图像的兄弟项而不是父#inner上设置8.xxx%的侧边距，这样就不需要负边距了
#inner > p {
padding: 0 8.571428571429%;
}
...
.alignright {
float: right;
width: 53.75%;
margin-left: 5%;
margin-right: 0; /* <-- this to 0 */
padding: 0.3125em 0 0.3125em 0.3125em; /* now you can also add your padding */
background: rgba(0, 0, 0, 0.5);
color: #fff;
}Stack Overflow用户
发布于 2011-12-08 13:15:44
希望我明白你在找什么.
我通常会尽量避免在构建页面布局时使用表格，但在这种情况下，如果你想改变宽度，那就是使用javascript和div。
如果你记住一条规则，把灰色的盒子贴在内容框的右边并不太复杂:首先放置固定的内容。
我所做的是让灰色的框漂浮在#内部框的内部，它将有0填充和边距。任何要放在里面的东西-都会有必要的填充。
注意:IE6不能正确处理边距，所以我总是尽量避免边距(并使用填充)。
下面是我推荐的代码：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
#layout { width: 100%; border: none; }
#layout #sidebar { width: 180px; }
#inner { float: left; width: auto; background: rgba(0, 255, 0, 0.1); }
#inner p { padding: 0 8.571428571429%; margin: 0px; }
#sidebar { width: 180px; background: rgba(0,0,255, 0.1); }
.alignright { float: right; width: 53.75%; background: rgba(0, 0, 0, 0.5); color: #fff; }
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" id="layout">
<tr>
<td id="inner" valign="top">
<p>Fluid width with 8.571428571429% L/R padding</p>
<p>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum.</p>
<div class="alignright">Here is some aligned-right goodness.</div>
<p>Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum at risus augue. Sed non semper dolor. Sed fringilla consequat velit a porta. Pellentesque sed lectus pharetra ipsum ultricies commodo non sit amet velit. Suspendisse volutpat lobortis ipsum, in scelerisque nisi iaculis a. Duis pulvinar lacinia commodo. Integer in lorem id.</p>
</td>
<td>
<td id="sidebar" valign="top">
<p>Fixed width 180px sidebar</p>
</td>
</tr>
</table>
</body>
</html>正如您所看到的-#内部元素内的元素将接收所需的填充
我使用表格进行布局，以避免使用javascript。我必须声明，我更喜欢js的方式。
希望这能帮你解决这个问题
https://stackoverflow.com/questions/8426124
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号