0

我不能说得比这更清楚，对不起。我想正确对齐 4 个 div（宽度为 1150px，因为这是内容 div 的最大宽度），并且当它不能在中心做 4、3 等时调整大小等）

在 >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 才能拯救这一天，我对此很好。指向正确方向的指针，互联网上的示例，都值得欢迎。谢谢你。

4

1 回答 1

2

改编自旧答案：

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

演示

于 2013-09-27T20:02:23.733 回答