帮我看看这个div + css问题

Question

我正在切片psd，并且有一部分屏幕会按照需要重复尽可能多的项目，类似于stackoverflow的问题列表。

它需要有这样的结构：

alt text http://i43.tinypic.com/k1xnxs.gif

这可能吗？ CSS应该如何？

谢谢！

Answer 1

问题出在你左边的div里，你声明“宽度可以根据内容增加”。这个宽度是如何定义的？右边的div可以扩展到剩余空间的100％，但是您必须通过给左边的div提供固定宽度或者提供等于100％的百分比来定义左边和右边div之间的关系。

Answer 2

那么，正如您可能已经看到的那样，so.com使用固定宽度div来实现您的布局目标。

很明显，我第一次尝试设置宽度自动失败，但也许我有一个有用的替代方法：使用左右浮动两个框。

<div style="border: 1px solid #000000; width: 60%"> 
    <div style="border: 1px solid #444444; float: left;"> 
    some text 
    </div> 
    <div style="border: 1px solid #999999; float: right;"> 
    foo 
    </div> 
</div> 

当然，如果我理解正确你的问题，这只会帮助;）

Answer 3

你可以尝试以下方法：

<style type="text/css"> 
    #container { 
     width:60%; 
    } 

    #content { 
     width:100%; 
    } 

    #user-content { 
     float:left; 
    } 
</style> 

<div id="container"> 
    <div id="content"> 
     <div id="user-content"> 
      <p>This can change depending on what is in here.</p> 
     </div> 
     <!-- The rest of the page's content goes here. --> 
    </div> 
</div> 

这使得“内容”分区填写的，其余“用户内容”未填充的空间。它只会是一个问题，当你的内容是不是用户含量高......但是这是一个不同的问题:)

这是另一种可能：

<style type="text/css"> 
    #container { 
     width:60%; 
    } 

    #content { 
     width:100%; 
     float:left; 
    } 

    #user-content { 
     float:left; 
    } 

    #page-content { 
     float:left; 
    } 
</style> 

<div id="container"> 
    <div id="content"> 
     <div id="user-content"> 
      <p>This can change depending on what is in here.</p> 
     </div> 
     <div id="page-content"> 
      <p>This should take up the rest of the space.</p> 
     </div> 
    </div> 
</div> 

Answer 4

据我知道的唯一途径给你的可变宽度的容器一个可变的宽度，并将它浮动到左边是给它{012}}}文本或者很多固定宽度的小物品放在这个容器中，它们会沿着第一行继续扩展，直到它们在进入之前填充外部div的宽度到第二行。它们不会填满整个高度，然后随着文本太多而不能容纳。

Answer 5

只是一个想法 - 你可能会做一些漂亮的JavaScript（可能使用jQuery？），它可以像你需要它们一样调整这些div的大小。