2012-07-26 63 views
0

我需要在图片中显示的框的空白处填充数据。红色部分将成为图像, 但仍然需要在白色空间连续显示数据。我怎样才能实现这个使用HTML和CSS?使用HTML和CSS的L形边框

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> 
+5

关于image float:right试过? – simoncereska 2012-07-26 11:57:38

+0

是的尝试浮动:是的,但它没有显示图像本身 – Anuya 2012-07-26 12:11:50

回答

0

只要把浮在你的形象:

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

理想情况下,你会希望保持造型与内容分开,但是这会给你的想法。希望帮助

+0

es尝试浮动:是的,但它没有显示图像本身 – Anuya 2012-07-26 12:12:00

+0

你确定“images/sandbox.gif”是你的图像的正确的URL位置? – 2012-07-26 12:48:56

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*/ 
} 

需要边距以将文字稍稍偏离图片,以便您可以创建边框的错觉