1

我在使用 2 列、流畅的布局时遇到问题。两列都在 div ( .dp_stage_sizer) 内，其中overflow: auto; .spl_aside浮动到左边，spl_main只是普通的position: relative，带有margin-left.

只要我使用像素值作为宽度和边距，这就可以正常工作，但是因为这个站点是流动的（无论如何低于某个窗口宽度），除了宽度之外的所有内容.dp_stage_sizer都是百分比。这会导致spl_main在其右侧产生额外的边距，因此它不会与其父元素对齐，但仅在 Webkit 浏览器中（尽管 Safari 中的边距比 Chrome 大得多）。

以下是我可以管理的精简版本中的代码：

HTML：

<div class="dp_stage_sizer">
    <div class = "spl_aside">
        aside
    </div>
    <div class = "spl_main">
        main
    </div>
</div>

CSS：

div.dp_stage_sizer
{
    position: relative;
    max-width: 1080px;
    margin: 0px auto;
    overflow: auto;

    background-color: silver;
}

.spl_main
{
    position: relative;
    margin: 0% 0% 0% 30%;
    overflow: hidden;

    background-color: green;
    height: 400px;
}

.spl_aside
{
    position: relative;
    float: left;
    width: 20%;
    overflow: hidden;

    background-color: red;
    height: 300px;
}

最后是一个JSFiddle供任何想要尝试的人使用。

下面是使用 Chrome 的网络检查器拍摄的图像，显​​示了三个 div 中的每一个的边距：

dp_stage_sizer： <code>dp_stage_sizer</code> 的边距

spl_aside： <code>spl_aside</code> 的边距

spl_main： <code>spl_main</code> 的边距

4

2 回答 2

1

position: absolute您可以通过设置而.spl_aside不是浮动来解决此问题。请注意，这意味着如果clear:float您希望在某些时候将内容放在它下方，您将失去使用的能力。

于 2012-12-05T16:01:07.393 回答
1

另一种解决方案可能是使用inline-blocks. 你如何实现这取决于你需要什么样的浏览器支持。把我的建议搁置一旁。

于 2012-12-05T16:11:58.323 回答