如何在3行中動態對齊3+ div？

Question

我正在嘗試將動態生成的div居中（包含其他div和動態內容），並使其與一行中最多3個水平對齊，當前它們在一條直線上，但不在父div中居中（即右邊的剩余空間）。 我在其他帖子上使用了很多方法都沒有用。 任何幫助都太棒了！ :)

HTML：（PHP將生成任意數量的代碼）

<div id="div$j" class="divs">
    <div class="image_ratio">
        <img src="photos/Asset 1-100.jpg" onerror="this.src='Social_Icons/Rectangle 157@2x.png'">
    </div>
    <h3><?php echo $name; ?></h3>
    <form type="text" name="form$j" id="form$j" action="AJAX.php" method="post">
        <div class="aligner">
            <button type="button" class="button_div")">X</button>
            <button type="button" class="button_div">Y</button>
            <button type="button" class="button_div">Z</button>
        </div><br>
        <input type="hidden"/>
        <input type="hidden"/>
    </form>
</div>

所有這些div都包裝在：

<div class="BAJAX">.....</div>

CSS：

.BAJAX {
    grid-area: pieces;
    border: solid;
}


.image_ratio {
        position: relative;
        width: 25vmin;
        height: 35vmin;

    }

    .image_ratio img {
        margin: 0 auto;
        width: 100%;
        height: 100%;
        object-fit: cover;

    }

    .divs {
        width: 25vmin;
        z-index: 98;
        display: inline-block;
        padding: 2.5%;
        float: left;
        margin: 0 auto;
        border: solid;

    }

Answer 1

最好的選擇是使用flexbox 。 您的容器（父容器）將display: flex和justify-content: space-between （以便項目可以均勻填充空間）。 然后，在每個單獨的項目（子項）上，您都將設置flex-basis: 33% （或更小），因為您希望項目具有一定的margin / padding以使另一個彼此分隔。

有關更多信息，請訪問： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

演示： https : //codepen.io/Manu92/pen/PvvdMp

Answer 2

代替<div class="aligner">使用<div class="row">.

https://getbootstrap.com/docs/3.4/css

您也可以將其添加到標簽<h3> 。