html - 在页面上定位图像

Question

我在 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>

Answer 1

您是否考虑过使用表格？您可以通过使用类来设置行宽、文本对齐方式、垂直对齐方式和所有其他样式 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>