Question

我需要对齐我的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;}

Answer 1

你不应该使用花车吗？在第一个和第二个div上应用float：left类。在第一个和第二个div之后，您需要清除浮动添加以下内容：

<div style="clear:both"></div>

最后一个表应该左对齐，如果没有，也可以将float：left类添加到它。

Answer 2

由于div包含在包装器中，你可以删除两个小div上的display: table-cell，这样它们就会自然地在彼此之下折叠，但是与更大的div内联。

Have an example!

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;
}

如何在使用css表时对齐div元素

2 个答案: