Question

在我的html / css测试页面中，我有一个带有2个cols的div容器。我的问题是，如果我在左栏中插入带有上边距或边框的div，则右列中的div不会在顶部对齐，但会受到左列中div的影响，我无法理解为什么。

CSS

body { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
background-color: #f5f6f7; 
} 

.container { 
width: 960px; 
margin-left: auto; 
margin-right: auto; 
} 

.row { 
margin-top: 10px; 
background: #fff; 
} 

.row:before, .row:after { 
display: table; 
line-height: 0; 
content: ""; 
} 

.row:after { 
clear: both; 
} 

.footer { 
height: 36px; 
line-height: 36px; 
} 

[class*="span"] { 
min-height: 1px; 
margin: 0px; 
} 

.span1 { 
width: 958px;
display: table-cell;     
} 

.span2  { 
width: 699px; 
display: table-cell;
} 

.span3  { 
width: 258px;
display: table-cell;
} 

.span3.dark {
background: #616161;
}

.content-center {
padding: 0px;
}

.a { 
background:#FF0000; 
border: 5px solid #00FF00;
margin-bottom: 10px;
}

.b { 
background:#FF8040; 
border: 1px solid #00FF00;
}

HTML

<div class="container">

<div class="row">

<div class="span2">

    <div class="content-center">
       <div class="a">LEFT PANEL <br /><br /><br /><br /><br /><br /></div>
    </div>

</div>

<div class="span3 dark">

    <div class="content-center">
        <div class="b">RIGHT PANEL <br/> Why it is not aligned at the top ?</div>
    </div>

</div>

</div>

</div>

如何解决我的问题？感谢

CSSDECK example

Answer 1

我以前没见过这种格子的位置。什么都有。

这样做：

.span3
{
   vertical-align: top;
}

CSS如何将div中的元素与2列对齐

1 个答案: