我想在我的asp图像旁边放一些文字,但我似乎无法把它弄好

时间:2013-12-21 22:12:14

标签: asp.net

我有一个网页,我想在其中放置一些从this图片顶部开始的文字。但我将照片更改为asp图像,以便我可以将其转到博客所有者可以更改照片的位置。由于我将其更改为asp控件,我能够做的最好的事情是启动照片底部的文本。有没有办法制作两列或其他东西并将它们放在一起?这是我目前的代码:

<div class="aboutBodyStyle">
    <asp:AccessDataSource ID="AccessDataSource3" runat="server" 
            DataFile="~/App_Data/TravelJoansDB.mdb"
                SelectCommand="SELECT PicPath FROM AboutPic"></asp:AccessDataSource>

            <asp:FormView ID="Formview2" runat="server" DataSourceID="AccessDataSource3">
            <ItemTemplate>
            <asp:Image ID="Image1" CssClass="placePicCenter" runat="server" 
                            BorderWidth="1px"
                            BorderColor="#EEEEEE"
                            ImageUrl='<%# "Website Photos/" + Eval("PicPath") %>' />
            </ItemTemplate>                               
            </asp:FormView>
    Hello!  My name is Jo Ann, pen name TRAVEL JOANS, and welcome to my journey.  I’m an avid traveler with an 
    intense passion for travel, culture, language and photography.  I started my travel blog as a way to document 
    my travels, share my awesome travel adventures and connect with other liked-mind travelers and bloggers.  
    My travels have taken to some unique and faraway places and . . . <br /></div>

<h1 class="aboutHeader2Style">OOPS . . . LET ME BACK UP TO . . . HOW IT ALL STARTED!</h1>

<p class="aboutBodyStyle">
In 1997, I decided that it was time to spread my wings and see the world. Since it   would be my first time traveling abroad, I wanted my trip to be flawless so I enlis...

等等。如何将文字放在照片的顶部?

1 个答案:

答案 0 :(得分:2)

标记:

<ItemTemplate>
    <p>
        <asp:Image ID="Image1" CssClass="imageLeft" runat="server" 
            BorderWidth="1px" BorderColor="#EEEEEE"
                ImageUrl='<%# "Website Photos/" + Eval("PicPath") %>' />
        My name is Jo Ann, pen name TRAVEL JOANS, and welcome to my journey.
        I’m an avid traveler with an intense passion for travel, culture, 
        language and photography.  I started my travel blog as a way to document
        my travels, share my awesome travel adventures and connect with other 
        liked-mind travelers and bloggers. My travels have taken to some unique 
        and faraway places and . . . 
    </p>
</ItemTemplate>   

CSS:

.imageLeft
{
    float: left; 
    margin-right: 10px;
    margin-bottom: 10px;
}

是否要将图像周围的前导文本放在模板中是可选的。您还可以设置FormView的尺寸以匹配图像的尺寸,并将文本放在控件之外;无论哪种方式都应该有效。