如何在左側每行制作 4 個項目，在右側制作 4 個項目

Question

我想實現以下目標。 我嘗試了這段代碼，但仍然無法實現。 請參閱所附圖片。 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>

Answer 1

試試表：

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

Answer 2

我做了一個基於 flex 的小提琴，你可以用你的類來模仿它，並使用有效的、最新的 CSS 而不是幾年前使用的浮點數。

HTML：

<div class="container">
  <div class="left">
    <div class="image-container">
      <img class="thumb" src="~/Content/images/house_50px.png" alt="Image">
    </div>
    <div class="text">
      <span> @Html.DisplayFor(modelItem => house) </span>
    </div>
  </div>
  <div class="right">
    <div class="image-container">
      <img class="thumb" src="~/Content/images/bedroom_80px.png" alt="Image">
    </div>
    <div class="text">
      <span> @Html.DisplayFor(modelItem => bedroom) </span>
    </div>
  </div>
</div>

CSS：

.container {
  display: flex;
  flex-direction: row;
}

.left, .right {
  display: flex;
  flex-direction: column;
  width: 40vw;
  background-color: yellowgreen;
  margin-right: 5vw;
}

https://jsfiddle.net/tamok48e/

注意：添加背景和寬度只是為了清晰起見，但可以在最終代碼中安全地刪除。

Answer 3

這種布局也很容易通過 Flexbox 或 Grid 實現。 由於圖像和文本在一起，您可以將它們放在一個 div 中，這樣將成為 1 個項目，所有 4 個項目都可以包裝在一個父容器中。 現在有多種方法可以實現這一目標。 我在 CodePen 上為您創建了 2 個示例。 一種方法是讓項目在 Flex 容器（父級）內流動並給父級一個寬度或最大寬度，然后項目將一個接一個地出現。 另一種方法是在父 Flex 中有兩個子項，您可以將它們想象為列，並且您的內容位於這兩個列中。 給定寬度時要小心，特別是如果你想讓它響應。

示例 1 ： https://codepen.io/gzaman/pen/ExxWGgy?editors=1100

 .container { display: flex; background: pink; max-width: 460px; flex-wrap: wrap; justify-content: center; }.flexitem { margin: 4px; padding: 8px; background: salmon; width: 200px; display: flex; align-items: center; }.thumbnailSmallImage { height: 20px; }

 <div class="container"> <div class="flexitem"> <div class="thumbnailLeftSmallIconTop"> <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image"> </div> <div class="thumbnailLeftSmallIconTop"> <span>Text in span 1</span> </div> </div> <div class='flexitem'> <div class="thumbnailLeftSmallIconBottom"> <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image"> </div> <div class="thumbnailLeftSmallIconBottom"> <span>Text in span 2</span> </div> </div> <div class='flexitem'> <div class="thumbnailLeftSmallIconBottom"> <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image"> </div> <div class="thumbnailLeftSmallIconBottom"> <span>Text in span 3</span> </div> </div> <div class='flexitem'> <div class="thumbnailLeftSmallIconBottom"> <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image"> </div> <div class="thumbnailLeftSmallIconBottom"> <span>Text in span 4</span> </div> </div> </div>

示例 2 ： https://codepen.io/gzaman/pen/ZEEeVjW?editors=1100

 .container { display: flex; max-width: 600px; flex-wrap: wrap; background: pink; justify-content: center; }.flexitem { width: 250px; }.thumbnailSmallImage { height: 20px; }.item { background: lightsalmon; display: flex; margin: 4px; padding: 8px; }

 <div class="container"> <div class='flexitem'> <div class="item"> <div class="thumbnailLeftSmallIconTop"> <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image"> </div> <div class="thumbnailLeftSmallIconTop"> <span>Text in span 1</span> </div> </div> <div class='item'> <div class="thumbnailLeftSmallIconBottom"> <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image"> </div> <div class="thumbnailLeftSmallIconBottom"> <span>Text in span 2</span> </div> </div> </div> <div class="flexitem"> <div class='item'> <div class="thumbnailLeftSmallIconBottom"> <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image"> </div> <div class="thumbnailLeftSmallIconBottom"> <span>Text in span 3</span> </div> </div> <div class='item'> <div class="thumbnailLeftSmallIconBottom"> <img class="thumbnailSmallImage" src="https://images.unsplash.com/photo-1571841767325-588e9a138f73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" alt="Image"> </div> <div class="thumbnailLeftSmallIconBottom"> <span>Text in span 4</span> </div> </div> </div> </div>

十多年前我們已經拋棄了表格布局，因此請不要將其與 go 與 Flex 或 Grid 一起使用。

如果你在某個地方卡住了，請告訴我。 :)

您可以在此處了解有關 Flex 的更多信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/