如何使用div和CSS完成上述操作?
答案 0 :(得分:3)
下面的代码应该这样做。我的例子中的图像是80 x 80像素。我假设里面有一个2像素的白色边框,并在左右两侧的绿色框上添加了一点填充。
(来源:subbot.net)
(我错误地裁剪了一下,但你明白了)
<div class="wrapper">
<div class="innerBorder">
<img src="images/thorarin.jpg" />
Lorem ipsum dolor sit amet... (snip)
</div>
</div>
<style type="text/css">
div.wrapper
{
border: solid 2px red;
}
div.wrapper div.innerBorder
{
border: solid 2px white;
background-color: green;
padding-right: 3px;
height: 80px;
overflow: hidden;
}
div.wrapper div.innerBorder img
{
float: left;
border-right: solid 2px white;
margin-right: 3px;
width: 80px;
height: 80px;
}
</style>
修改:哎呀,删除了结算DIV
。我最初为可变高度做了这个,但这不是必须的。