我想实现以下目标。
我尝试了这段代码,但仍然无法实现。请参阅所附图片。
4张图片;左2个图片旁边有文字...,右2个图片旁边有文字。与附件图像完全相同。
.thumbnailLeftSmallIconBottom {
float: left;
/*width:50%;*/
padding: 5px;
/*clear: both;*/
/*display:inline-block;*/
}
.thumbnailRightSmallIcon {
float: right;
width: 50%;
}
.thumbnailSmallImageAll::after {
content: "";
display: table;
clear: both;
}
<div class="thumbnailLeftSmallIcon1">
<div class="thumbnailLeftSmallIconTop">
<img class="thumbnailSmallImage" src="~/Content/images/house_50px.png" alt="Image">
</div>
<div class="thumbnailLeftSmallIconTop">
<span> @Html.DisplayFor(modelItem => house) </span>
</div>
<div class="thumbnailLeftSmallIconBottom">
<img class="thumbnailSmallImage" src="~/Content/images/bedroom_80px.png" alt="Image">
</div>
<div class="thumbnailLeftSmallIconBottom">
<span> @Html.DisplayFor(modelItem => bedroom) </span>
</div>
最佳答案
试试表:
<table>
<tr>
<td>
<div class="thumbnailLeftSmallIconTop">
<img class="thumbnailSmallImage" src="~/Content/images/house_50px.png" alt="Image">
<span> @Html.DisplayFor(modelItem => house) </span>
</div>
</td>
<td>
<div class="thumbnailLeftSmallIconBottom">
<img class="thumbnailSmallImage" src="~/Content/images/bedroom_80px.png" alt="Image">
<span> @Html.DisplayFor(modelItem => bedroom) </span>
</div>
</td>
</tr>
<tr>
<td>
<div class="thumbnailLeftSmallIconTop">
<img class="thumbnailSmallImage" src="~/Content/images/house_50px.png" alt="Image">
<span> @Html.DisplayFor(modelItem => house) </span>
</div>
</td>
<td>
<div class="thumbnailLeftSmallIconBottom">
<img class="thumbnailSmallImage" src="~/Content/images/bedroom_80px.png" alt="Image">
<span> @Html.DisplayFor(modelItem => bedroom) </span>
</div>
</td>
</tr>
</table>
tr表示行
td表示细胞