使用HTML和CSS的L形边框

时间:2012-07-26 11:54:59

标签: html css

我需要在图片中显示的框的空白处填充数据。红色部分将是一个图像, 但是仍然需要在白色空间中连续显示数据。如何使用HTML和CSS实现这一目标?

enter image description here

Updated with code :

 <div id="Content" runat="server">
    <img id="ad" src="images/sandbox.gif"  
            style="float:right; height: 200px; width: 150px;" alt="{alt}" />

    </div>

3 个答案:

答案 0 :(得分:3)

@Anuya看看这个http://jsfiddle.net/TfXNf/

答案 1 :(得分:1)

如果你用css样式定义一个类,以便切换所有需要具有相同布局的图片,那就更好了

HTML

<img src="http://link.to/image.jpg" class="className" alt="Image"/>

CSS

.className{
float: right;
margin-right:2px; /*change these based on your layout*/
margin-bottom: 2px; /*change these based on your layout*/
}

需要使用边距将图片稍微推离图片,以便创建边框的错觉

答案 2 :(得分:0)

只需在您的图片上放置一个浮动:

<img src="{imageLocation}" alt="{alt}" style="float:right;" /> 

理想情况下,您希望将样式与内容分开,但这会给您提供想法。希望有所帮助