0

我试图在同一行中生成图像和一些句子在此处输入图像描述

如上所示，它看起来像这样。我希望图像位于图像信息旁边。所以它不会占用这么多空间。

@foreach (var m in Model.Matches)
{ 
    <div class="row-fluid" style="border: 1px solid blue; padding: 10px">
    <div class="span2" style="border: 1px solid red; padding: 10px">
    <img src="@m.Photo.PhotoURL" class="img-responsive" @*style="max-height:175px;max-width:100px;"*@/>
    </div>
    <div class="span2" style="border: 1px solid black; padding: 10px">
     <h5>@m.Username</h5>
     <h5>@m.Age year old @m.Gender.WhatGender | Seeking</h5>
     <h5>@m.City, @m.State.Name,@m.State.Country.Name</h5>
    </div>
    </div>
     <hr />
}

上面的代码正在生成带有信息的图像。我不确定要包括什么以使其左侧的图像足够小，而信息则适合其右侧。我也在使用引导程序。

4

1 回答 1

1

您可以尝试这样的事情（您没有提到响应性）

HTML：

<div class="span2 info" style="border: 1px solid black; padding: 10px">
    <img src="" /> 
    <div class=" span2 info_text">
       <h5>Username</h5>
       <h5>Age year old Seeking</h5>
       <h5>City, State.Country Name</h5>
    </div>
</div>

CSS：（将这些 css 代码添加到您自己的 css 文件中）

.info img{
    width:150px;
    height:150px;
    float:left;
}

.info_text{
    border: 1px solid black;
    padding: 10px;
    display:inline-block;
    margin:0 0 0 20px;
}

例子。

注意：另外，请确保，如果您使用的是responsive模板，那么您应该根据使用多个媒体查询或引导方式的设备调整图像大小。

于 2013-10-06T22:21:38.900 回答