根據div編號將多個div垂直或水平放置在另一個div中

我想在另一個 div 中放置多個 div，以便一行中最多有兩個 div，另一個 div 將轉到下一行并垂直居中。如果有四個/六個/偶數個 div，則每行將有兩個 div。如果有奇數個 div，則每行將有兩個 div，最后一行將有一個垂直居中的單獨 div。不使用JS可以嗎？div 的數量會有所不同，因為它可能會動態/運行時變化。

div
[
div  div
div  div
]

div
[
div     div
div     div
    div
]

我當前的代碼：

<div id="container">
        <div id="smallerCon">
            <div id="smallerLeftBoxText">Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
            </div>
        </div>
        <div style="width: 1vw;"></div>
        <div id="smallerCon">
            <div id="smallerLeftBoxText">Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
            </div>
        </div>
    </div>
    <div id="container">
        <div id="smallerCon">
            <div id="smallerLeftBoxText">Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
            </div>
        </div>
        <div style="width: 1vw;"></div>
        <div id="smallerCon">
            <div id="smallerLeftBoxText">Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
            </div>
        </div>
    </div>

<style>
#container{
    width: 90vw;
    display: flex;
    flex-direction: row;
    margin: auto;
}
#smallerCon{
    height: 20vh;
    width: 44.5vw;
    margin: auto;
    background-image:linear-gradient(to bottom right, rgba(255, 0, 128, 0.577), rgba(0, 204, 255, 0.49)),url("../img/26March.gif");
    display: flex;
    flex-direction: row;
    object-fit: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid rebeccapurple;
    margin-bottom: 2vh;
}
#smallerLeftBoxText{
    width: 40vw;
    margin: auto;
    font-weight: 400;
    color: rgb(245, 223, 223);
}

我想要相同的輸出，但代碼如下：

<div id=container>
  <div id=smallerCon>...</div>
  <div id=smallerCon>...</div>
  <div id=smallerCon>...</div>
  <div id=smallerCon>...</div>
</div>

uj5u.com熱心網友回復：

很高興看到您已經擁有的代碼，以便我們提供幫助。另外，要回答您的問題，可以。只需 CSS 和 HTML 就足以實作它。

uj5u.com熱心網友回復：

可以使用 css GRID 輕松完成 https://css-tricks.com/snippets/css/complete-guide-grid/

uj5u.com熱心網友回復：

flex 可用于此，下面的最小示例：

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.container > .card {
    width: 50%;
}

.card > div {
    background: #ccc;
    margin: 1rem;
    padding: 1rem;
}

<div class="container">
    <div class="card"><div>1</div></div>
    <div class="card"><div>2</div></div>
    <div class="card"><div>3</div></div>
    <div class="card"><div>4</div></div>
</div>

<div class="container">
    <div class="card"><div>1</div></div>
    <div class="card"><div>2</div></div>
    <div class="card"><div>3</div></div>
    <div class="card"><div>4</div></div>
    <div class="card"><div>5</div></div>
</div>

uj5u.com熱心網友回復：

首先：在 CSS 中，ID 必須對單個元素是唯一的。轉換id=smallerCon成class=smallerCon并.smallerCon在您的 CSS 中使用。

解決方案：

• 您需要使用 CSS 屬性flex-basis或flex（的簡寫flex-grow, flex-shrink and flex-basis）限制 Flexbox (FBL) 容器子元素占據其 FBL 父容器的 50%
• 使 FBL 父元素能夠在其子元素超過其指定寬度時使用flex-flow: row wrap（簡寫flex-direction, flex-wrap）包裝其子元素
• 可以選擇水平居中 FBL 子元素在其父元素中justify-content
• 可以選擇為 FBL 子元素分配最小寬度，以使它們全部包裹在較小的螢屏上

片段：

/* include border width in total element width */
* { box-sizing: border-box }

#container {
    width: 90vw; margin: auto;

    /* Flexbox */
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 1rem;
    /**/
}

.smallerCon {
    height: 20vh;
    min-width: 18rem; /* [OPTIONAL] set a min for small screens */

    /* Flexbox */
    flex: 0 1 calc(50% - 0.5rem); /* as FBL child */

    display: flex; /* as FBL parent */
    flex-flow: row wrap;

    /* eye-candy */
    background-image: linear-gradient(
            to bottom right,
            rgba(255, 0, 128, 0.577),
            rgba(0, 204, 255, 0.49)
        ),
        url("../img/26March.gif");

    object-fit: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    border: 2px solid rebeccapurple;
}

<div id=container>
  <div class=smallerCon>...</div>
  <div class=smallerCon>...</div>
  <div class=smallerCon>...</div>
  <div class=smallerCon>...</div>
  <div class=smallerCon>...</div>
</div>

標籤：htmlcss

上一篇：從Firestore檢索資料時，Chartjs折線圖中的資料點未正確定位在y軸上

下一篇：HTML和CSS顯示屬性有問題