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

我想在页面左侧有一个容器（带有一些文字），，它自己调整自己的可用空间，以及右边的2个侧边栏（我使用的是Wordpress）。（这两个侧边栏与float工作正常。）所以我试图在容器上width:auto。如何使用“宽度自动”和“浮动”来对齐div？

但它不适应其余的可用空间（它占用所有页面宽度）。如果我将宽度设置为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>

来源

2012-05-11 Paul

这样做的一个非常简单的方法是编辑文章的模板，因此当只有一个侧边栏时，容器有一个特殊的CSS。 – OptimusCrime

@OptimusCrime：谢谢，你能更具体吗？我应该在html中使用“style =”属性吗？它会覆盖的CSS文件？ – Paul

容器内的两个侧杆？ –

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

来源

2012-05-14 02:01:02 Paul

宽度：汽车是默认值，所以它不会做什么比一个DIV会做标准的其他任何东西，这是填充可用宽度，因为它是块级元素。浮动它时会发生变化，它将包裹其内容，因此可以是任何宽度，直到最大宽度。

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

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

来源

2012-05-11 08:54:28 howard10

虽然这些天我通常会推荐一个基于网格系统的响应式布局。各种设备的不同尺寸的弹性布局效果良好。 – howard10

谢谢你的回答，它不会改变每个侧栏上20％的任何内容，并且宽度：容器上的宽度，你会有其他想法吗？ – Paul

如果你坚持所有百分比布局，那么你会做一些像容器：60％sidebar1：20％sidebar2：20％。宽度：auto不会为你做任何事情，因为它并不意味着'自动填充剩余的空间'。它会导致容器填满整个100％的宽度，并将侧边栏推下。 – howard10

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

来源

2016-04-14 21:06:51 chaiboy

http://codepen.io/jasonmcalpin/pen/qZoLQa – chaiboy

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

回答

相关问题