Question

我有一个div容器，带有子div。

我要做的是将所有行中的div放入最高行的高度。如果清除：两者都被使用，下一行的任何div都应该是该行中最高的高度。

我可以在html中添加类但是我不能改变结构，例如嵌套更多的div和行e.t.c.所以解决方案必须是基于CSS的

我尝试过使用display：table，并显示：table-cell ..没有运气！

HTML

<div id=container>
    <div>
    a<br>a<br>a<br>a<br>a<br>a
    </div>
    <div>
    a<br>a
    </div>
    <div class=newline>
    a<br>a<br>a<br>a<br>a<br>a
    </div>
    <div>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
    </div>
</div>

CSS

#container {
    display: table;
    border: 1px solid black;
    width: 500px;
}

#container div {
    border-right: 2px solid red;
    background: #f7f7f7;
    display: table-cell;
    margin: 2px;
    float: left;
    width: 200px;
}

.newline {
    clear: both;
}

Answer 1

你现在的代码并不遥远。

使用display: table-row

分隔行

然后从float: left

中删除table-cell

DEMO

#container {
    	display: table;
    	border: 1px solid black;
    	width: 500px;
    }
    
    #container .tr {
        display: table-row;
    }
    
    #container .tr >div {
        border-right: 2px solid red;
        background: #f7f7f7;
    	display: table-cell;
    	margin: 2px;
    	width: 200px;
    }

<div id=container>
       <div class="tr">
    		<div>
    		    a<br>a<br>a<br>a<br>a<br>a
    		</div>
    		<div>
    		    a<br>a
    		</div>
       </div>
        <div class=tr>
    		<div>
                a<br>a<br>a<br>a<br>a<br>a
            </div>
    		<div>
    		    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
    		</div>
        </div>
    </div>

使所有div成为最高的div

1 个答案: