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>中。

如何在3行中动态对齐3+ div？

2 个答案: