所以我的页面是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;
}
是否有一种更简单,更好的方法来排除所有这些......提前感谢
答案 0 :(得分:2)
以下对我有用......
.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-left,并在其位置添加了margin-right。
答案 1 :(得分:1)
试试这个,
从.left_image和.right_image中删除margin-left:11px 添加如下
.left_image {margin: 10px;}
.right_image {margin: 10px;}
答案 2 :(得分:0)
我刚刚在top_center_image中添加了另一个div容器来包装两个图像,将两个图像设置为向左浮动,而不是左边和右边一个。然后用这个
设计新的divwidth:630px; height:155px;margin-left:10px; padding-top:14px;
您需要调整两张图片的左边距离以将其推入,但我相信你可以解决这个问题。