html - 如何在其他流畅的设计中使 DIV 粘在固定宽度元素的一侧

Question

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

代码胜一千字...

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

看来我的负 margin 计算一定有问题。非常感谢任何帮助。

Answer 1

在图像的兄弟而不是父图像上设置 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;
}