2

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

代码值一千字……

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

看来我的负保证金计算必须在某个地方关闭。任何帮助深表感谢。

4

2 回答 2

1

在图像的兄弟而不是 parent 上设置 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;
}
于 2011-12-08T05:15:41.357 回答
0

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

我通常会尽量避免在构建页面布局时使用表格，但在这种情况下，如果你想要改变宽度，那就是那个或者带有 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 方式。

希望能为你解决

于 2011-12-08T05:15:43.623 回答