如何使用“宽度自动”和“浮动”来对齐 div？答案

【问题标题】：How to use "width auto" and "float" to align divs?如何使用“宽度自动”和“浮动”来对齐 div？
【发布时间】：2016-04-15 05:06:51
【问题描述】：

我想在页面左侧有一个容器（带有一些文本），可以根据可用空间自行调整，右侧有 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 侧边栏：我仍然无法使其工作，有人可以看看这个简单的代码吗？有 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>

【问题讨论】：

一个非常简单的方法是编辑文章的模板，这样当只有一个侧边栏时，你就有了一个特殊的容器CSS。
@OptimusCrime：谢谢，你能说得更具体点吗？我应该在 html 中使用“style=”属性吗？它会覆盖css文件吗？
你的容器里面有两个侧边栏吗？
@Paul ：文章有一个特殊的模板。例如，如果您在正文中添加一个类，例如 <body class="onesidebar">，您可以在 CSS 中编写类似 body.onesidebar #container 的内容
@Jack：嗨，杰克，没有外面的，我在上面编辑了我的帖子，也许你可以看看？非常感谢

标签： css width css-float

【解决方案1】：

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

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

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

【讨论】：

虽然这些天我通常会推荐基于网格系统的响应式布局。不同尺寸的弹性布局适用于各种设备。
感谢您的回答，它不会改变任何东西，每个侧边栏有 20%，容器上有 width:auto，您还有其他想法吗？
如果你坚持所有百分比布局，那么你会做类似容器：60% sidebar1:20% sidebar2:20% 的事情。 Width:auto 不会为您做任何事情，因为它并不意味着“自动填充其余空间”。它导致容器填充整个 100% 宽度并推动其下方的侧边栏。
感谢 howard10 的帮助，我对 css 很陌生，你能看看我在上面第一篇文章中的编辑吗？我用一个简单的例子编辑了它......也许你会有答案？非常感谢

【解决方案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;
}

【讨论】：

【解决方案3】：

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

【讨论】：