使用HTML和CSS的L形邊框

我需要在圖片中顯示的框的空白處填充數據。紅色部分將成爲圖像，但仍然需要在白色空間連續顯示數據。我怎樣才能實現這個使用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>

來源

2012-07-26 Anuya

關於image float：right試過？ – simoncereska 2012-07-26 11:57:38

是的嘗試浮動：是的，但它沒有顯示圖像本身 – Anuya 2012-07-26 12:11:50

@Anuya看看這個http://jsfiddle.net/TfXNf/

來源

2012-07-26 12:36:23 simoncereska

只要把浮在你的形象：

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

理想情況下，你會希望保持造型與內容分開，但是這會給你的想法。希望幫助

來源

2012-07-26 12:05:02

es嘗試浮動：是的，但它沒有顯示圖像本身 – Anuya 2012-07-26 12:12:00

你確定「images/sandbox.gif」是你的圖像的正確的URL位置？ – 2012-07-26 12:48:56

它的更好，如果你在你爲了切換需要具有相同的佈局中的所有圖片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*/ 
}

需要邊距以將文字稍稍偏離圖片，以便您可以創建邊框的錯覺

來源

2012-07-26 12:12:31 Christos312

使用HTML和CSS的L形邊框

回答

相關問題