2 
<style>
.classname {
    min-width:248px;
    height:40px;
    max-width:498px;
    border:1px solid red;
    float:left;     
}
</style>

    <div id="maindiv" style="width:3134px;border:1px solid green;height:90px;">
        <div class="classname">
        </div>
        <div class="classname">
        </div>
        <div class="classname">
        </div>
    </div>

因此，无论有多少孩子，maindiv我都希望他们扩展到父宽度大小的全尺寸。例如：如果 maindiv 有 1200px 宽度，如果是 3 或 300px 如果是 4 则每个孩子有 400px 只有 CSS 解决方案

4

3 回答 3

6

这有点啰嗦，但可能

/* one item */
.classname:first-child:nth-last-child(1) {
    width: 100%;
}

/* two items */
.classname:first-child:nth-last-child(2),
.classname:first-child:nth-last-child(2) ~ .classname {
    width: 50%;
}

/* three items */
.classname:first-child:nth-last-child(3),
.classname:first-child:nth-last-child(3) ~ .classname {
    width: 33.3333%;
}

/* four items */
.classname:first-child:nth-last-child(4),
.classname:first-child:nth-last-child(4) ~ .classname {
    width: 25%;
}

...

您可能还需要

.classname {
    display: inline-block;
}

有关详细信息，请参阅Lea Verou 的博客文章

于 2013-04-09T14:17:26.267 回答
0

<DIV>s 通常不会并排运行；它们是块元素。您正在寻找的多个元素“自动共享空间”的行为在 CSS 中本机实现并不容易，这就是为什么所有各种“多列布局”CSS 解决方案只支持一组特定数量的列; 例如，一些流行的支持 12 的所有因数。

解决此类特定问题的最简单方法是使用表格单元格（或<DIV>带有表格单元格布局的 s）。但是，您必须设置width=33%或width=25%知道有多少列。或者使用您不想要的javascript。

于 2013-04-09T14:13:02.660 回答
0

我认为仅使用 CSS 是不可能的。

如果您在#maindiv服务器端生成宽度，您可以进行一些计算。

例子：

<?php
    $width = 3134;
    $children = 4;
    $singlewidth = width/children;
?>
<div class="classname" style="width: <?php echo $singlewidth; ?>px;"></div>

或者，您可以使用 a <table>，具体取决于您要执行的操作。

于 2013-04-09T14:14:09.130 回答