0

コンテナ div の中央に複数の div を配置しようとしています。ページの左側から必要なパディングを計算するためにモジュラス関数を使用しています。私が使用しているJavaScriptは次のとおりです。

JavaScript

window.addEventListener("resize", winResize, false);
var width, leftPad, space, boxWidth;

winResize();

function winResize() {
    width = document.getElementById('body').offsetWidth;
    boxWidth = 350 + 10 + 10;
    space = width % boxWidth;
    document.getElementById('a').innerHTML = width + '....' + space;
    leftPad = space / 2;
    document.getElementById('container').style.paddingLeft = leftPad + 'px';
    document.getElementById('container').style.width -= leftPad;

};

HTMLは次のとおりです。

<div id="container">
    <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>

そしてCSS：

#container {
    width: 100%;
    float: left;
}
#container .block {
    width: 350px;
    height: 350px;
    background-color: 4e4e4e;
    float: left;
    margin: 10px;
}

私の問題はこのコードにあります。左側のパディングがコンテナ div を右側に押し込み、ページがウィンドウよりも広くなります。コンテナーの幅 (winResize 関数の一番下の行) からパディングを削除しようとしましたが、これは何もしないようです。この「余分な div」を CSS パディング/マージンで削除する方法はありますか?

4

2 に答える 2

1

私が理解できるのは、コンテナをページの中央に表示しようとしているということです.jsはそれを行う必要はなく、ページに静的要素を配置するためにjsを使用しないことを好みます.

これは、中央に配置して流動的にするために使用する必要があるcssです。

 #container {
    width: 100%;
    text-align:center;
 }

 #container .block {
    width: 350px;
    height: 350px;    
    background-color: #4e4e4e;
    display:inline-block;
    margin: 10px;
 }

また、このフィドルを見ることができます: http://jsfiddle.net/ghFRv/

于 2013-10-16T21:09:25.737 に答える
0

HTML要素を中央に配置したい理由があるかどうか知りたいですか?

これは CSS の仕事であり、CSS は非常にうまく機能します。

DIVS を中央に配置したい場合はmargin: 0 auto;、.block で使用できます。これにより、レイアウトが中央に配置され、要素ブロックのレベルも維持されます。

CSS は次のようになります。

#container {
    width: 100%; /*Remove the float, it's not needed. Elements align top-left standard.*/
}

#container div.block {
    width: 350px; /*Makes it possible for margin to center the box*/
    height: 350px; 
    background: #4e4e4e; /*background is the shorthand version*/
    margin: 10px auto; /*10px to keep your margin, auto to center it.*/
}

これにより問題が解消され、JS が存在しないためページの読み込みが速くなります。さらに、JS が無効になっているためにレイアウトが「無効」になることはありません。

賛成票を投じる/回答を受け入れることを忘れていなければ、これが役に立てば幸いです

‐ シド

于 2013-10-16T21:15:08.423 に答える