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





html - 如何在左侧每行制作4个元素,在右侧制作4个元素-LMLPHP

最佳答案

试试表:

<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表示细胞

09-17 00:44