0

我试图在使用 display:table-cells 向左浮动的 div 之间实现相同的高度边界线。我知道如果我更改 float:none，div 的高度是相等的，但由于某种原因，我无法将 float:left 更改为 none。

有没有办法使 div 与 float:left 等高？

请参阅此图像以解释问题以及我要实现的目标

代码 ：

<!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

4

0 回答 0