0

我正在尝试让两个部分漂浮在右侧主列的旁边。这些部分应该具有固定的宽度，并且主要部分应该是流动的。这是我最近的一次。问题是 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;
}
4

3 回答 3

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;
}

这是JSBin 的最终结果。您需要调整页面大小以查看不同的视图。

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

于 2013-05-19T15:22:29.977 回答
1

为了按照您的要求定位您的 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;        
}

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

于 2013-05-19T14:50:01.807 回答
1

我终于通过使用#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;
}
于 2013-05-19T20:55:39.273 回答