當每個網格中有不同數量的專案時如何使用網格

所以我想弄清楚是否有辦法讓我的代碼看起來像這樣： 我希望它看起來像什么

但我的代碼看起來像這樣：我的代碼

我對 html 和 css 很陌生，但我嘗試將網格置于 3x2 布局中，我的邏輯是標簽和復選框是我的行，所以 2 和我有 3 個。但我無法以我想要的方式得到它。我也嘗試過 flex 但我無法獲得相同的結果。

.checkbox {
            border: 0;
            display: grid;
            grid-template-columns: max-content max-content;
            align-items: center;
            padding-left: 0;
        }
        
        .boxContainer {
            min-width: 40vh;
        }

        .checkbox label {
            display: block;
            position: relative;
            margin-bottom: .25em;
        }

        .checkbox label input {
            margin-right: .5em;
        }

        .checkbox .time {
            position: absolute;
            right: 30%
        }

<fieldset class="checkbox">
        <div class="title">Ringnes-Ronny</div>
        <div class="boxContainer">
            <label><input type="checkbox">Polisen<span class="time">59 SEK</span></label>
            <label><input type="checkbox">Valhalla<span class="time">39 SEK</span></label>
            <label><input type="checkbox">Raggare p? stureplan<span class="time">49 SEK</span></label>
            <label><input type="checkbox">Monster<span class="time">39 SEK</span></label>
        </div>
        </div>

        <div class="title">Miss Li</div>
        <div class="boxContainer">
            <label><input type="checkbox">Instruktionsboken<span class="time">39 SEK</span></label>
            <label><input type="checkbox">Komplicerad<span class="time">49 SEK</span></label>
            <label><input type="checkbox">Starkare<span class="time">(kan ej best?llas)</span></label>
        </div>

        <div class="title">Avicii</div>
        <div class="boxContainer">
            <label><input type="checkbox">Wake Me Up<span class="time">59 SEK</span></label>
            <label><input type="checkbox">Hey Brother<span class="time">49 SEK</span></label>
            <label><input type="checkbox">Waiting For Love<span class="time">(kan ej best?llas)</span></label>
            <label><input type="checkbox">You Make Me<span class="time">29 SEK</span></label>
            <label><input type="checkbox">Levels<span class="time">49 SEK</span></label>
        </div>
    </fieldset>

uj5u.com熱心網友回復：

這可以僅使用 2 個類來實作，如下所示：

CSS -

.checkbox {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 1rem;
      }
.vertical{
        display:flex;
        flex-direction: column;
      }

HTML -

 <fieldset class="checkbox">
      <div>Ringnes-Ronny</div>
      <div class="vertical">
        <label><input type="checkbox" />Polisen</label>
        <label><input type="checkbox" />Valhalla</label>
        <label><input type="checkbox" />Raggare p? stureplan</label>
        <label><input type="checkbox" />Monster</label>
      </div>
      <div class="vertical">
        <span class="time">39 SEK</span>
        <span class="time">49 SEK</span>
        <span class="time">39 SEK</span>
      </div>

      <div>Miss Li</div>
      <div class="vertical">
        <label><input type="checkbox" />Instruktionsboken</label>
        <label><input type="checkbox" />Komplicerad</label>
        <label><input type="checkbox" />Starkare</label>
      </div>
      <div class="vertical">
        <span class="time">39 SEK</span>
        <span class="time">49 SEK</span>
        <span class="time">(kan ej best?llas)</span>
      </div>

      <div class="title">Avicii</div>
      <div class="vertical">
        <label><input type="checkbox" />Wake Me Up</label>
        <label><input type="checkbox" />Hey Brother</label>
        <label><input type="checkbox" />Waiting For Love</label>
        <label><input type="checkbox" />You Make Me</label>
        <label><input type="checkbox" />Levels</label>
      </div>
      <div class="vertical">
        <span class="time">59 SEK</span>
        <span class="time">49 SEK</span>
        <span class="time">(kan ej best?llas)</span>
        <span class="time">29 SEK</span>
        <span class="time">49 SEK</span>
      </div>
    </fieldset>

uj5u.com熱心網友回復：

看起來您的第一個代碼塊中可能有額外的內容。

我在您嘗試復制的代碼之間看到的主要區別似乎是復選框組之間的空白。為了解決這個問題，您可以添加另一個元素并在整個部分周圍放置一些邊距。下面的示例 HTML 和 CSS。你還有其他方面的問題嗎？

如果您需要更多地控制此塊在不同螢屏上的擴展或收縮方式，CSS 網格可能會有所幫助，但可能會使事情變得過于復雜。

你的代碼：

<div class="title">Ringnes-Ronny</div>
        <div class="boxContainer">
            <label><input type="checkbox">Polisen<span class="time">59 SEK</span></label>
            <label><input type="checkbox">Valhalla<span class="time">39 SEK</span></label>
            <label><input type="checkbox">Raggare p? stureplan<span class="time">49 SEK</span></label>
            <label><input type="checkbox">Monster<span class="time">39 SEK</span></label>
        </div>
        </div>  //duplicate

您是否嘗試過將每個部分包裝在 div 中并添加邊距以創建一些額外的空白？

示例：HTML：

<div class='grouping'>  //add element to group title and checkboxes.
<div class="title">Ringnes-Ronny</div>
<div class="boxContainer">
<label><input type="checkbox">Polisen<span class="time">59 SEK</span></label>
<label><input type="checkbox">Valhalla<span class="time">39 SEK</span></label>
<label><input type="checkbox">Raggare p? stureplan<span class="time">49 SEK</span></label>
<label><input type="checkbox">Monster<span class="time">39 SEK</span></label>
    </div>
    </div>

CSS：

.grouping {
margin: 10px, 0;
}

標籤：html css

上一篇：OnSubmit函式不適用于輸入型別='submit'

下一篇：下拉選單不會向后滑動