Question

我正在切片psd，并且屏幕的一部分会重复所需的项目，类似于stackoverflow的问题列表。

它需要有这样的结构：

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

有可能吗？ css应该怎么做？

谢谢！

Answer 1

您可以尝试以下方法：

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

这使得“content”div填充了“user-content”未填充的剩余空间。当您的内容高于用户内容时，这只是一个问题...但这是一个不同的问题：）

这是另一种可能性：

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

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

Answer 3

好吧，正如您所见，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 4

据我所知，给你的可变宽度容器一个可变宽度并将它浮动到左边的唯一方法是给它{width：auto; float：left;}

但我不知道你是否可以做任何有用的事情，因为如果你有文字或许多小的固定宽度的物品放在这个容器中，他们将继续沿着第一行扩展，直到它们填满在进入第二行之前外部div的宽度。它们不会填满整个高度，然后逐渐向外推，因为文字太多而无法容纳。

Answer 5

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

帮助我解决这个div + css问题

5 个答案: