我需要对齐我的 div 元素，使第一列元素占据两行，第二列元素占据第一行和第二行，并使用 css 表格一个堆叠在另一个下方.
我的html
<html>
<head><link rel="stylesheet" type="text/css" href="core.css"></head>
<body>
<div id="wrapper">
<div class="specialsticky">
<img src="Hydrangeas.jpg" alt="first image">
</div>
<div class="specialsticky">
<img src="Chrysanthemum.jpg" alt="second image">
</div>
<div class="specialsticky">
<img src="Desert.jpg" alt="third image">
</div>
</div>
</body>
</html>
这是css部分
#wrapper {
display:table;
width:1024px;}
div.specialsticky:nth-child(1){
display: table-cell; border: 1px solid black; vertical-align: middle;
width:604px;height:447px;}
div.specialsticky:nth-child(1) img{
width: 604px;height:447px;}
div.specialsticky:nth-child(2){
display: table-cell; }
div.specialsticky:nth-child(2) img{ width: 424px;height:222px;}
div.specialsticky:nth-child(3){display: table-cell;}
div.specialsticky:nth-child(3) img{width: 424px;height:222px;}
最佳答案
由于 div 包含在包装器中，您可以删除两个小 div 上的 display: table-cell，以便它们自然地折叠在彼此下方，但与较大的 div 内联。
CSS
#wrapper {
display:table;
width:1024px;
font-size: 0; /* fix inline gap */
margin: 0 auto;
}
div.specialsticky:nth-child(1) {
display:table-cell;
border:1px solid #000;
vertical-align:middle;
width:604px;
height:447px;
}
div.specialsticky:nth-child(1) img {
width:604px;
height:447px;
}
div.specialsticky:nth-child(2) img,div.specialsticky:nth-child(3) img {
width:424px;
height:222px;
}
关于html - 如何在使用 css 表格时对齐 div 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25436330/