Question

我有一个带有衬垫的流体内容区域和一个固定宽度的侧边栏。我想要float: right一张图片，并给它一个等于容器margin-right的负padding，以使浮动图像与侧边栏相邻。

代码胜过千言万语......

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

似乎我的负利润率计算必须在某处。非常感谢任何帮助。

Answer 1

在图像的兄弟节点上设置8.xxx％边填充而不是父#inner，这样就不需要负边距

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

Answer 2

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

我通常会尝试避免在构建页面布局时使用表格，但在这种情况下，如果您想要更改宽度，则可以是或者带有div的javascript。

如果您记住一条规则，将灰色框卡在内容框的右侧并不会太复杂：首先放置固定内容。

我所做的是将灰色框放在#inner框内，它将有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元素中的元素将接收所需的填充

我使用表格进行布局以避免javascript。我必须说我宁愿选择js。

希望能为你解决这个问题

如何在其他流体设计中将DIV固定在固定宽度元件的侧面

2 个答案: