Question

我不能说清楚，对不起。我想正确对齐4个div（宽度为1150px，因为它是内容div的最大宽度），并在调整大小时无法执行4,3，在中心等等）

在＆gt; 1150px屏幕上它会/应该是这样的：http://i.imgur.com/KaOPqZK.png。现在，我能来的最接近的是：http://i.imgur.com/6khwQkR.png。我可以将左边的第一个子边距设置为0，但由于有多行，所以仍然会有填充。创建新行作为div也是不可能的，因为这会在调整大小时毁掉所有内容，并且在两行上只显示3/1。

当调整大小时，它应该居中，所有边都有边距，而不是像现在这样：http://i.imgur.com/GiR1nZ2.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;
}

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

1 个答案:

demo