Question

我正在尝试使用display：table-cells在左侧浮动的div之间获得相同的高度边界线。我明白如果我改变float：none，div的高度是相等的但是由于某种原因我不能改变float：left to none。

有没有办法让div与float：left？

相等

请参阅此image来解释问题以及我正在尝试实现的目标

代码：

<!doctype html>
<html>
<head>
    <style>
        .c-grids {display:table}
        .c-grid {display:table-cell;float:left;border-left:1px solid red;padding:0 20px;}
        .c-grids input {display:block;}
    </style>
</head>
<body>
    <div class="c-grids">
        <DIV class="c-grid c-grid-1of4">
            name<INPUT type=text autocomplete="off" name="text1" value="">
        </DIV>
        <DIV class="c-grid c-grid-2of4">
            <INPUT type=text autocomplete="off" name="text2" value="">
        </DIV>
        <DIV class="c-grid c-grid-3of4">
            <INPUT type=text autocomplete="off" name="text31" value="">
            <INPUT type=text autocomplete="off" name="text32" value="">
        </DIV>
        <DIV class="c-grid c-grid-4of4">
            <INPUT type=text autocomplete="off" name="text41" value="">
            <INPUT type=text autocomplete="off" name="text42" value="">
            <INPUT type=text autocomplete="off" name="text43" value="">
        </DIV>
    </div>
</body>
</html>

谢谢， CT

具有float：div的div的等高边框线

0 个答案: