我是否需要使用javascript获取流体宽度列和静态宽度列以共享同一行？

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

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

以下是我的意思的一个例子：

<style> #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> <script> /* Do i need to do this... 1. get window width 2. add the widths of all divs inside #ColumnContainer without the 'FluidColumn' class 3. subtract the total static width from the window width 4. divide this remaining width by the number of divs with the 'FluidColumn' class 5. set the the width, in percentage, for the divs with the 'FluidColumn' class */ </script> <style> // Or... .FluidColumn { width: ??? } // is there a special width attribute that works this out? </style> #ColumnContainer>div{display:inline block} /* 我需要这样做吗。。。 1.获取窗口宽度 2.添加不带'FluidColumn'类的#ColumnContainer内所有div的宽度 3.从窗口宽度中减去总静态宽度 4.用“FluidColumn”类将剩余宽度除以div数 5.设置具有“FluidColumn”类的div的宽度（以百分比为单位） */ //或者。。。 .FluidColumn{width:？？？}//是否有一个特殊的宽度属性可以解决此问题？

---

问题在于变量这个词，你看。请在此处查看这篇文章：

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

但是，总有一些限制，如果使用太多的列，样式表可能会变得混乱。为什么不更详细地解释一下变量在这里的严格含义，以便我们能更好地帮助您

---

编辑

---

在您的情况下，答案肯定是否定的，您必须使用Javascript。还有其他的可能性，比如在服务器端动态生成样式，或者使用

display:table

，但是我建议不要使用这些方法。它们非常麻烦，而且很难维护。在这里使用Javascript还可以更灵活地确定流体柱的比率和宽度

如果有人感兴趣，这是我制作的脚本

<script type="text/javascript"> function 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(); }); </script> 函数vSetFluidColumnWidths（）{ var _iStaticColumnsWidth=0； $（“#ColumnGrid.StaticColumn”）.each（函数（i）{iStaticColumnsWidth+=$（this.width（）；}）； var(iFluidColmnWidth=（$（“#ColumnGrid”）.width（）-"iStaticColumnsWidth）/$（“#ColumnGrid.FluidColumn”）.length； $（“#ColumnGrid.FluidColumn”）.each（函数（i）{$（this.width（_-ifluidColmWidth）；}）； } $（document）.ready（函数（）{vSetFluidColumnWidths（）；}）； $（窗口）.resize（函数（）{vSetFluidColumnWidths（）；}）；

---

通过变量，我的意思是不同的页面将有不同数量的静态和流体列，所以我不能轻易地使用预构建列模板。我已经更新了这个问题。