html - 标记此示例(内图)。

Question

我不知道如何用 HTML 和 CSS 实现这个例子。我尝试了很多方法，但没有一个奏效。 有什么想法吗？

文本 block 的高度是动态的。图像的大小(在本例中为圆圈)是固定的。

http://i.stack.imgur.com/aI4kM.png

Answer 1

将一个 div 绝对定位在每个框的右侧，高度为 100%，红点为透明背景图像:

HTML

<div class="box">
    <p>line 1</p>
    <p>line 2</p>
    <div class="circle"></div>
</div>
<div class="box">
    <p>line 1</p>
    <p>line 2</p>
    <p>line 3</p>
    <p>line 4</p>
    <p>line 5</p>
    <div class="circle"></div>
</div>

CSS

.box {
    background-color: #eee;
    width: 300px;
    border:solid 1px green;
    border-radius:4px;
    position:relative;
    padding:10px; 
    margin-bottom:15px
}
.circle {
    position:absolute; 
    width: 50px;
    height: 100%;
    top:0; right:-30px;
    background:transparent url('somepng') no-repeat 0 50%
}   

检查这个工作fiddle