如何在不固定的设计中使DIV粘在固定宽度元素的一侧

我有一个带填充的流体内容区和一个固定宽度的边栏。我想要float: right一个图像，并给它一个负的margin-right等于容器的padding，以获得浮动图像到侧边栏。

代码胜过千言万语……

这里有一个简化的测试用例，它显示了这个问题:http://jsfiddle.net/alexdunae/34ZDw/3/——收缩或展开预览窗格以查看。

看来我的负保证金计算一定出错了。

设置8。xxx%边距的兄弟图像，而不是父#inner，这样你就不需要负边距

http://jsfiddle.net/34ZDw/9/

#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;
}

希望我明白你在找什么....

我通常尽量避免使用表格在构建页面的布局，但在这种情况下，如果你想改变宽度，它要么是或javascript与div。

如果你记住一条规则:把固定的内容放在前面，那么把灰框卡在内容框的右边并不太复杂。

我所做的是将灰色框浮动在#inner box中，该框的内边距和内边距为0。无论里面是什么-都有必要的填充。

注意:IE 6不能正确处理边距，所以我总是尽量避免它们(并使用填充代替)。

下面是我建议的代码:

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

可以看到，#inner元素内部的元素会收到所需的padding

我使用了一个表格的布局，以避免javascript。我必须声明我更喜欢js的方式。

希望能帮你解决这个问题

相关内容

最新更新

热门标签：