响应式 CSS - 如何使用填充/边距'dynamically'将 div 与父宽度对齐？

Question

对不起，我不能比这更清楚了。我想正确对齐 4 个div(宽度为 1150px，因为这是内容div 的最大宽度(，并在无法在中心执行 4、3 等时调整大小(

在>1150px屏幕上，它会/应该像这样：https://i.stack.imgur.com/i9XxP.png。现在，我能得出的最接近的是：https://i.stack.imgur.com/mlqsL.png。我可以将左侧的第一个子项边距设置为 0，但由于有多行，这些行仍然具有填充。创建新行作为div 也是不可能的，因为这会在调整大小时破坏一切，并且在两行上只显示 3/1。

调整大小时，它应该居中，所有边的边距均匀，而不是像现在这样：https://i.stack.imgur.com/rst3B.png。

基本上我现在拥有的所有代码都是这样的，仅仅是因为我不知道其他方法。

div.project-container {
    float: left;
    margin: 0 8px 30px 8px;
    position: relative;
    width: 270px;
}

我猜一定是

Javascript拯救了这一天，我对此很好。指向正确方向的指针，互联网上的例子，都是受欢迎的。谢谢。

Answer 1

改

编自一个旧答案：

.HTML

<div id="container">
    <div class="obj">1</div>
    <div class="obj">2</div>
    <div class="obj">3</div>
    <div class="obj">4</div>
    <div class="obj">5</div>
    <div class="obj">6</div>
    <div class="obj">7</div>
    <div class="obj push"></div>
    <div class="obj push"></div>
    <div class="pushend"></div>
</div>

.CSS

#container
{
    max-width: 980px;
    background-color: lavender;
    display: inline-block;
    text-align: justify;
}
.obj
{
    width: 180px;
    height: 180px;
    background-color: lightgreen;
    display: inline-block;
    margin-bottom: 20px;
}
.obj.push {
    height: 0px
}
.pushend {
    width: 100%;
    height: 0px;
    display: inline-block;
}

演示