Question

是否可以在具有纯CSS的灵活宽度容器中使任意数量的列具有相同的宽度？

示例：

<div>
  <div>COL-1</div>
  ...
  <div>COL-N</div>
</div>

外部div具有灵活的宽度，列数不同。无论列内容宽度如何，列宽应相同。

Answer 1

为外部div尝试display:table，为内部div尝试display:table-cell

<div id="outer">
  <div>COL-1</div>
  <div>COL-N</div>
  <div>cvcvffff</div>
</div>

#outer{
    display:table;    
    width:720px;
    table-layout: fixed;
}
#outer>div{
    display:table-cell;
    border:1px solid black; 

}

FIDDLE

Answer 2

是的，可以这样做。
如果您在代码中使用PHP，请执行以下操作以生成以下＆lt; div>元件

<html>
    <style>
        div{
            width:100px;
        }
    </style>
    <body>
        <?php
        for ($i = 0; $i < 100; $i++)
            echo "<div>COL-$i</div>";
        ?>
    </body> 
</html>

均匀的列宽取决于元素的数量

2 个答案: