在頁面上定位圖像

我在ASP.NET中有一個圖像，我希望我可以非常清楚地解釋這個，所以你可以給出非常明確的答案。在頁面上定位圖像

我的主人形式有以下設置：

.page 
{ 
    width: auto; 
    background-color: #fff; 
    margin: 0px auto 0px auto; 
    border: 1px solid #496077; 
    height: auto; 
} 

.header 
{ 
    position: relative; 
    margin: 0px; 
    padding: 0px; 
    background: #4b6c9e; 
    width: 100%; 
} 

.header h1 
{ 
    font-weight: 700; 
    margin: 0px; 
    padding: 0px 0px 0px 20px; 
    color: #f9f9f9; 
    border: none; 
    line-height: 2em; 
    font-size: 2em; 
} 

.main 
{ 
    padding: 0px 12px; 
    margin: 12px 8px 8px 8px; 
} 

.leftCol 
{ 
    padding: 6px 0px; 
    margin: 12px 8px 8px 8px; 
    width: 200px; 
    min-height: 200px; 
} 

.footer 
{ 
    color: #4e5766; 
    padding: 8px 0px 0px 0px; 
    margin: 0px auto; 
    text-align: center; 
    line-height: normal; 
}

我有大約每個條目一個人在頁面的左側邊緣側（可變信息名稱，地址的「聯繫我們」頁面，聯繫信息等）。我想定位一個圖像，該圖像只是某個人給出的最遠右側信息的幾個像素，並且我希望圖片的高度x寬度根據文本的高度而變化（如果用戶要輸入更多線條以獲取每個聯繫人的信息等）

如何獲得具有此定位的圖像？到目前爲止，我已經能夠在屏幕的最右側獲得圖像，但這不太好，因爲我希望在表單上有更多空間的2列聯繫信息。

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
<h1>Contact Information<b><img align="left" alt="pic" class="bold" 
     src="profilepic.jpg" 
     style="width: 150px; height: 150px; float: right;" vspace="0" /></b></h1> 
<b><h2>adsf</h2> 
adsf</b> <br /> 
asdf<br /> 
asdf</br> 
asdf <br /> 
asdf <br /> 
asdf 
</asp:Content>

來源

2015-06-29 908as7f6basd09f7

歡迎來到Stack Overflow！對於這樣的問題，如果你能抽象出你的問題，這將有助於澄清你的想法：「給定X，我希望Y在Z中，並且我嘗試了N」。除此之外，給我們一個JSFiddle，其中包含您想要實現的示例。執行這些步驟您也可能自己找到解決方案。 – Jan

你的意思是這樣的：http://jsfiddle.net/39q4b2oh/？ – Brian

@Brian這正是我正在尋找的 – 908as7f6basd09f7

你有沒有考慮過使用表格？您可以使用類來設置行寬，文本對齊，垂直對齊和所有其他樣式yadda yadda的樣式;或者您選擇。但是，這將爲您設置每個人的行和列...

<table class="table"> 
     <tr class="tableRow"> 
      <td class="tableDataLeft"> 
      Some Persons info Number 1 
      </td> 
      <td class="tableDataMiddle"> 
      Person Number 1's second column of info 
      </td> 
      <td class="tableDataRight"> 
      Person number 1's image...<img src/> 
      </td> 
     </tr> 
     <tr> 
      <tdclass="tableDataLeft"> 
      Some Persons info Number 2 
      </tdclass="tableDataLeft"> 
      <td class="tableDataMiddle"> 
      Person Number 2's second column of info 
      </td> 
      <td class="tableDataRight"> 
      Person number 2's image...<img src/> 
      </td>   
     </tr> 
</table>

來源

2015-06-29 17:53:56 user2784648

在頁面上定位圖像

回答

相關問題