Question

我想在页面左侧有一个容器（带有一些文本），自适应和可用空间，右边有2个侧边栏（我正在使用Wordpress））。（2个侧边栏可以与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侧边栏：我仍然无法使其工作，有人可以看看这个简单的代码吗？有两个盒子：绿色的盒子和红色的盒子......

<!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>

Answer 1

宽度：auto是默认值，因此它不会做除DIV标准之外的任何操作，这是填充可用宽度，因为它是块级元素。当你浮动它时它会改变，它将包裹它的内容，因此可以是任何宽度，直到最大宽度。

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

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

Answer 2

好的，我发现了：把文字放在最后，使用overflow：hidden和auto，然后在右侧的小容器上浮动，谢谢你的答案。

Answer 3

在父div上使用display：table。然后显示：孩子们的表格单元格。它们将按照它们在表格中的方式对齐。

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

如何使用“width auto”和“float”来对齐div？

3 个答案: