响应式CSS-如何使用填充/边距将div与父级宽度“动态”对齐？

debugcn 发表于 Dev

胃

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

在> 1150px的屏幕上，它将/应该是这样：http ://i.imgur.com/KaOPqZK.png 。现在，我能找到的最接近的是：http : //i.imgur.com/6khwQkR.png。我可以将左侧的第一个孩子边距设置为0，但是由于有多行，所以这些行仍具有填充。也不能以divs的形式创建新行，因为这将在调整大小时破坏所有内容，并且两行仅显示3/1。

调整大小时，它应该居中，并且在所有边上均具有均匀的边距，而不是像现在这样：http : //i.imgur.com/GiR1nZ2.png。

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

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

我猜想必须由Java语言来挽救这一天，我对此表示满意。朝着正确方向的指针，在互联网上的例子，都欢迎。谢谢你。

错误的

改编自旧答案：

的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;
}