0

行の最後の項目なしでこの結果を取得するにはどうすればよいですか:

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

1 に答える 1

0

JavaScript が iOS のデフォルトであるため、JavaScript を使用して何かをデモします。ドキュメントの準備状態を切り替えるために jQuery のみを使用しましたが、それを body タグに追加することもできます。その後は、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);
});

幸運を！

于 2013-04-08T16:59:22.170 に答える