Question

如何在没有行中的最后一项的情况下获得此结果：

margin-right: 30px;

在css中，现在我使用：

margin-right:                                                   30px;
margin-bottom:                                                  30px;

它应该像ios主屏幕

http://www4.picturepush.com/photo/a/12640862/img/12640862.png http://www3.picturepush.com/photo/a/12640866/img/12640866.png

HTML：

<div class="home-main">
        <a href="t1home" class="item"><h1>Hallo</h1></a>
        <a href="t1home" class="item"><h1>Hallo</h1></a>
        <a href="t1home" class="item"><h1>Hallo</h1></a>
        <a href="t1home" class="item"><h1>Hallo</h1></a>
</div>

的CSS：

 .home-main {
    width:                                                          90%;
    max-width:                                                      960px;
    min-height:                                                     100px;
    margin:                                                         0 auto;
    overflow:                                                       hidden;
    text-align: center;
}
.home-main a {
    width:                                                          126px;
    min-height:                                                     126px;
    max-height:                                                     166px;
    margin-right:                                                   30px;
    margin-bottom:                                                  30px;
    background-color:                                               #777;
    float:                                                          left;
    color:                                                          #fff;
    text-decoration:                                                none;
}
.home-main a:nth-last-child(1){
    margin-right:                                                   0;
}
.home-main a h1 {
    width:                                                          100%;
    height:                                                         33px;
    margin:                                                         0;
    margin-top:                                                     126px;
    padding-top:                                                    7px;
    font-size:                                                      19px;
    text-align:                                                     center;
    background-color:                                               #222;
}
@media screen and (width:320px){
    .home-main a:nth-child(even) {
        margin-right:                                               0;
    }
}

Answer 1

我将使用JavaScript演示完成的内容，因为这是iOS上的默认设置。我只使用jQuery来切换文档的就绪状态，但你也可以将它添加到body-tag中。之后你不需要jQuery。

我正在使用JavaScript做的是根据仍然打开的剩余空间的划分为left-padding添加额外的内容，以便将浮点数推到水平中间位置。

如果JavaScript出现问题，我会删除答案。

以下是JSfiddle

<强> HTML

<div id="wrapper">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="floatClear"></div>
</div>

<强> CSS

* {
    box-sizing: border-box;
}

#wrapper {
    width: 90%;
    border: 1px solid red;
    padding: 5px;
}

.block {
    width: 130px;
    height: 170px;
    background-color: grey;
    float: left;
    margin: 5px 5px 5px 5px;
}

.floatClear {
    clear: both;
}

<强>的JavaScript

$(document).ready(function () {
    var wrapper = document.getElementById('wrapper');

    var wrap_w = wrapper.offsetWidth - (5*2); // minus padding
    var block_w = wrapper.getElementsByTagName('div')[0].offsetWidth + (5*2); // plus margin

    var remainder = wrap_w % block_w;
    var left_add = Math.floor(remainder / 2); // what to add left

    wrapper.style.paddingLeft = (left_add + 5) + 'px';

    //console.log(remainder);
});

祝你好运！

以ios主屏幕为中心的Css盒子

1 个答案: