如何使用div和CSS完成此设计？

Question

如何使用div和CSS完成上述操作？

Answer 1

下面的代码应该这样做。我的例子中的图像是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。我最初为可变高度做了这个，但这不是必须的。