时间戳

首页 > 解决方案 > 如何在左侧每行制作 4 个项目，在右侧制作 4 个项目

html - 如何在左侧每行制作 4 个项目，在右侧制作 4 个项目

问题描述

我想实现以下目标。我尝试了这段代码，但仍然无法实现。请参阅所附图片。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>

预期结果

标签： htmlcss

解决方案

试试表：

<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 表示单元格

推荐阅读