使用固定宽度 CSS 获取两个侧边部分以向左浮动

Question

我正在尝试让两个部分漂浮在右侧主列的旁边。这些部分应该具有固定的宽度，并且主要部分应该是流动的。这是我最近的一次。问题是 main 没有改变它的大小。如果它在我曾经使用过圣杯的另一部分的地方，但这也不起作用。

[编辑]澄清； HTML 不能更改（很多）。左右需要停留在 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。您需要调整页面大小才能看到不同的视图。

请注意，在上面的示例中使用了小屏幕的辅助侧边栏，因为使用 CSS 来呈现不符合 DOM 顺序的元素非常困难。

Answer 2

我最终通过使用#main 的内部元素来回答它。我需要检查的是此修复程序的兼容性。以及分配给#main 的背景是什么。

https://jsfiddle.net/TR2SD/5/

我添加了一个“内部”元素

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

并且 css 会通过一些更正来浮动所有内容。

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

#main {
    background-color: #f0f;
    margin-left: -240px;
    width: 100%;
    float: left;
}

#main .inside {
    margin-left: 240px;
}

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

#right {
     background-color: #ff0;
}

#left,#right {
    float: left;
    width:240px;
}

Answer 3

为了按照您的要求定位您的 div，您应该：

定位div左右浮动

为了将你命名为 left 的 div 放在 right 的左侧，你必须在 left 之前声明 right，最后声明 main 不需要相对定位 容器应声明最小宽度以防止布局中断。

所以 HTML 应该是一种...

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

CSS应该是

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

#main {
    border: 1px dotted #f0f;
    margin: 0 -240px 0 0;    
}

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

#right {
     background-color: #ff0;
}

#left,#right {
    float: right;
    width:220px;        
}

从这里开始，随心所欲地调整 一个fiddle here