css - 使用固定宽度的 CSS 获取两个旁边部分以向左浮动

Question

我正在尝试让两个部分漂浮在右侧主栏的旁边。这些部分应该是固定的宽度，主要部分应该是流动的。这是我最接近的一次。问题是 main 没有改变它的大小。如果它在旁边的一节中我使用了 chalice ，但这也不起作用。

[编辑]澄清； HTML 无法更改(很多)。 Left 和 right 需要留在 main 之后，这对于屏幕阅读器和 seo 是最好的。如果内容足够宽，旁白实际上是左栏和右栏。所以只有特定的宽度才能得到我想要实现的布局。[/edit]

https://jsfiddle.net/TR2SD/1/

<div id="container">
    <div id="main">
        main contents<br>with some content
    </div>
    <aside id="left">
        left contents
    </aside>
    <aside id="right">
        right contents
    </aside>
</div>

和CSS:

#container {
    border: 1px solid red;
    width: 100%;
}

#main {
    border: 1px dotted #f0f;
    margin: 0 -240px 0 0;
    position: relative;
    width: 100%;
    float: left;
}

#left {
    background-color: #0ff;
}

#right {
    background-color: #ff0;
}

#left,#right {
    float: left;
    width:220px;
    position: relative;
    z-index:2;
}

Answer 1

对于一个侧边栏，您可以通过使用容器上的填充和主要部分上的边距来考虑其宽度来定位:

.container {
    padding-right: 200px; /* Matches sidebar width */
    overflow: hidden;
}

.main {
    width: 100%;
    float: left;
}

.sidebar {
    width: 200px; 
    margin-right: -200px; /* Matches sidebar width */
    float: right;
}

对于带有缩放中心的左侧边栏和右侧边栏，您可以使用类似的技术:

.container {
    padding-right: 200px;
    padding-left: 200px;
    overflow: hidden;
}

.main {
    width: 100%;
    float: left;
}

.left-sidebar {
    float: left;
    width: 200px;
    margin-left: -200px;
}

.right-sidebar {
    float: left;
    width: 200px;
    margin-right: -200px;
}

.left-sidebar, .right-sidebar {
    display: none;
}

这是 final result on JSBin .您需要调整页面大小才能看到不同的 View 。

请注意，上面的示例中使用了用于小屏幕的辅助侧边栏，因为使用 CSS 渲染元素的 DOM 顺序异常困难。