5

我想在页面左侧有一个容器（带有一些文本），它可以根据可用空间进行调整，并在右侧有 2 个侧边栏（我使用的是 Wordpress）。（两个侧边栏可以正常工作float。）所以我尝试width:auto了容器。

但它不会适应剩余的可用空间（它占用所有页面宽度）。如果我将宽度设置为70%，它适合索引页面上的空间，但如果我点击一篇文章，我只剩下 1 个侧边栏，所以文本和侧边栏之间有一个空白空间。

你知道如何解决这个问题吗？

#container { /* the text */
    overflow:auto;
    width:auto;
    position:relative;
    float:left;
}

#primary { /* first sidebar */
    position:relative;
    border:1px solid red;
    float:right;
    width:250px;
}


#second { /* second sidebar */
    border:1px solid red;
    background:white;
    width:250px;
    height:auto;
    float:right;
    margin-left:15px;
}

谢谢

编辑 ：

假设我使用它而不是 wordpress 侧边栏：我仍然无法使其工作，有人可以看看这个简单的代码吗？有2个盒子：绿色的和红色的...

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
        <body>

            <div style="position:relative; width:700px; margin:0 auto;">
                <div style="width:auto; border:1px solid green;">i would like to have a container (with some text) on the left of the page, that adapts itself with the space available, and 2 sidebars following on the right (i'm using Wordpress). (The 2 sidebars work fine with float. ) So i tried width:auto on the container.

But it does not adapt itself with the rest of the space available (it takes all the page width). If i set the width to 70%, it fits the space on the index page, but if i click on an article, i only have 1 sidebar left, so there is a blank space between the text and the sidebar.</div>

<div style="width:20%; float:right; border:1px solid red;">blablabla</div>
            </div>

        </body>
</html>
4

3 回答 3

3

width:auto 是默认值，因此它不会做任何事情，除了标准 DIV 会做的事情，即填充可用宽度，因为它是块级元素。当您浮动它时，这会发生变化，它将包裹其内容，因此可以是最大宽度的任何宽度。

我认为您遇到的麻烦是混合百分比宽度和固定宽度。我可以看到您要做什么- 有一个固定宽度的侧边栏（或两个），而页面的其余部分是灵活的。在基于表格的布局时代，这样做真的很容易，但我们不要去那里！

听起来你想要一个流畅的布局，但有 2 个固定的列。可能值得阅读这篇文章，看看是否有任何适合您尝试做的事情：http ://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-什么最适合你/

于 2012-05-11T08:54:28.937 回答
2

在父 div 上使用 display:table。然后在孩子身上显示：table-cell。他们将按照他们在表格中的方式对齐。

#container { /* the text */
    overflow:auto;
    width:auto;
    position:relative;
    // float:left;
    display: table-cell;
    vertical-align:top;
}

#primary { /* first sidebar */
    position:relative;
    border:1px solid red;
    // float:right;
    width:250px;
    vertical-align:top;
}


#second { /* second sidebar */
    border:1px solid red;
    background:white;
    width:250px;
    height:auto;
    // float:right;
    margin-left:15px;
    display: table-cell;
    vertical-align:top;
}
于 2016-04-14T21:06:51.470 回答
1

好的，我发现了：将文本放在最后，使用溢出：隐藏和自动，并在右侧的小容器上浮动，谢谢您的回答。

于 2012-05-14T02:01:02.200 回答