Css 如何使用；“自动宽度”；及；浮动；对齐div？
我希望在页面左侧有一个容器（带有一些文本），可以根据可用空间进行自我调整，在右侧有两个侧栏（我正在使用Wordpress）。 （这两个侧栏与Css 如何使用；“自动宽度”；及；浮动；对齐div？,css,width,css-float,Css,Width,Css Float,我希望在页面左侧有一个容器（带有一些文本），可以根据可用空间进行自我调整，在右侧有两个侧栏（我正在使用Wordpress）。 （这两个侧栏与float配合得很好）因此我尝试在容器上使用width:auto 但它不能适应剩余的可用空间（占用所有页面宽度）。如果我将宽度设置为70%，它将适合索引页上的空间，但是如果我单击一篇文章，我只剩下一个侧边栏，因此文本和侧边栏之间有一个空格 你知道怎么解决这个问题吗 #container { /* the text */ overflow:auto;
floatwidth:auto#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>
我想在页面左侧有一个容器（带有一些文本），可以根据可用空间进行调整，在右侧有两个侧栏（我使用的是Wordpress）。（这两个边栏与float配合得很好。）所以我在容器上尝试了width:auto。
但它不能适应剩余的可用空间（占用所有页面宽度）。如果我将宽度设置为70%，它将适合索引页上的空间，但是如果我单击一篇文章，我只剩下一个侧边栏，因此文本和侧边栏之间有一个空格。
喋喋不休
听起来你想要一个流动的布局，但是有两个固定的列。也许值得一读这篇文章，看看是否有什么适合您的做法：好的，我发现了：将文本放在末尾，使用overflow:hidden和auto，然后在右边的小容器上浮动，谢谢您的回答。在父div上使用display:table。然后在子div上使用display: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;
}
一个非常简单的方法是编辑文章模板，这样当只有一个侧栏时，容器就有了一个特殊的CSS。@OptimuScime:谢谢，你能更具体一点吗？我应该在html中使用“style=”属性吗？它会覆盖css文件吗？两个侧栏在你的容器内吗？@Paul:文章有一个特殊的模板。例如，如果将类添加到body中，如
body.onesidebar#container