html - 如何正确对齐此 Css

Question

所以我的页面是here正如你在中间看到的那样，我正在尝试(不成功)让两张图片适合灰色框......每边一个。这是我的 html

  <div class="top_center_image">
     <div class="left_image">
     </div>
     <div class="right_image">
    </div>
  </div>

这是我的 CSS

.top_center_image{
    background: url("../image/TopBox.png") no-repeat;
  height: 179px;
  margin-left: 5px;
  width: 649px;
}
.left_image{
    background: url('../image/DwightWorldVideoleft.png') top left no-repeat;
    width: 296px;
  height:152px;
    margin-left:11px;
    float:left;
}

.right_image{
  background: url("../image/AMWimage.png") no-repeat scroll left top transparent;
   height: 152px;
   margin-left: 11px;
   width: 311px;
    float:right;
}

有没有更简单更好的方法来排列所有这些......提前致谢

Answer 1

以下对我有用...

.right_image {
background: url("../image/AMWimage.png") no-repeat scroll left top transparent;
float: right;
height: 152px;
margin-right: 12px;
margin-top: 12px;
width: 311px;

.left_image {
background: url("../image/DwightWorldVideoleft.png") no-repeat scroll left top transparent;
float: left;
height: 152px;
margin-left: 11px;
margin-top: 12px;
width: 296px;

我为两者都添加了 margin-top 规则。我从右边的图像中删除了 margin-left，并在其位置添加了 margin-right。