0

我有可变数量的 div 作为列，我希望它们中的可变数量具有静态宽度（以像素为单位），并且它们的可变数量以扩展到窗口中的剩余宽度。如果我将流体列宽度组合为 100%，某些列将被挤出行 - 我是否需要使用 javascript 减去静态列的宽度以确定流体列在窗口宽度中的份额，或者是有我可以使用的css属性吗？

通过变量，我的意思是我不知道高级有多少流动或静态列，所以我不能使用预构建的 2 或 3 列模板。

这是我的意思的一个例子：

<风格>
    #ColumnContainer > div { display:inline-block }
</style>

<div id="ColumnContainer">
    <div style="width:200px"></div>
    <div class="FluidColumn"></div>
    <div class="FluidColumn"></div>
    <div style="width:100px"></div>
    <div class="FluidColumn"></div>
</div>

<脚本>
    /*
        我需要这样做吗...

        1.获取窗口宽度
        2. 在#ColumnContainer 中添加所有div 的宽度，而无需'FluidColumn' 类
        3.从窗口宽度中减去总静态宽度
        4. 将此剩余宽度除以具有“FluidColumn”类的 div 数
        5. 为具有“FluidColumn”类的 div 设置宽度，以百分比为单位
    */
</脚本>

<风格>
    // 或者...

    .FluidColumn { 宽度：？？？} // 是否有一个特殊的宽度属性可以解决这个问题？
</style>
4

2 回答 2

1

问题出在variable一词上，你看。在这里查看这篇文章：http ://www.alistapart.com/articles/holygrail/

它描述的是两个固定宽度和一个宽度列的情况。鉴于此，您应该能够创建一个包含任意数量的固定和可变宽度列的布局。

然而，总是有限制的，如果你使用太多的列，样式表会变得混乱。您为什么不更详细地解释一下这里的变量严格意味着什么，以便我们可以更好地帮助您？

编辑

在您的情况下，答案肯定是否定的，您必须使用 Javascript。还有其他可能性，例如在服务器端动态生成样式或使用display: table，但我建议不要使用其中任何一种。它们非常麻烦，并且难以维护。在这里使用 Javascript 还可以让您更灵活地确定流体列的比率和宽度。

于 2010-09-09T00:50:04.473 回答
1

万一有人感兴趣，这是我制作的脚本。

<script type="text/javascript">
    函数 vSetFluidColumnWidths() {
        var _iStaticColumnsWidth = 0;
        $("#ColumnGrid .StaticColumn").each(function(i) { _iStaticColumnsWidth += $(this).width(); });
        var _iFluidColmnWidth = ($("#ColumnGrid").width()-_iStaticColumnsWidth)/$("#ColumnGrid .FluidColumn").length;
        $("#ColumnGrid .FluidColumn").each(function(i) { $(this).width(_iFluidColmnWidth); });
    }
    $(document).ready(function() { vSetFluidColumnWidths(); });
    $(window).resize(function() { vSetFluidColumnWidths(); });
</脚本>
于 2010-09-09T01:56:37.227 回答