0

これが問題のフィドルです。http://www.jsfiddle.net/PL6KX/ どこに問題があるのか​​わからない。助けていただければ幸いです。ありがとう。

端から比例してすべてを中央に配置したい。横中心。

HTML:

<div id="firstleft-box"></div>
<div id="secondleft-box"></div>
<div id="firstright-box"></div>
<div id="secondright-box"></div>

CSS:

#firstleft-box {
    position: absolute;
    display:block;
    left: 20%;
    border: 2px solid black;
    width: 100px;
    height: 100px;
}

#secondleft-box {
    position: absolute;
    display:block;
    left: 40%;
    border: 2px solid black;
    width: 100px;
    height: 100px;
}

#firstright-box {
    position: absolute;
    display:block;
    left: 60%;
    border: 2px solid black;
    width: 100px;
    height: 100px;
}

#secondright-box {
    position: absolute;
    display:block;
    left: 80%;
    border: 2px solid black;
    width: 100px;
    height: 100px;
}
4

2 に答える 2

1

floatdivを隣り合わせに使用しmargin、それらの間にスペースを作り、それらの周りに 1 つの div をラップしmargin: 0px auto;、アプローチで中央に配置するのは複雑すぎます

于 2013-03-14T16:17:38.370 に答える
0

コードが期待する出力を生成しない理由のデモについては、次の JS Fiddle を参照してください。

http://jsfiddle.net/PL6KX/2/

基本的に、各ボックスの左側を 20、40、60、80 などに揃えます。ボックスの中心に揃えると想定しています。上記のフィドルで行ったことは、幅が 20% の 5 つのボックスを作成して、それらが互いに接触して接触するポイントが 20%、40%、60%、および 80% になるようにすることです。ご覧のとおり、上部のボックスは左端をこれらのパーセンテージに揃えています。

必要なもの: (フィドルの 3 番目のボックス セット)

http://jsfiddle.net/PL6KX/4/

HTML:

<div class="container">
<div id="new-box"></div>
<div id="new-box"></div>
<div id="new-box"></div>
<div id="new-box"></div>
</div>

CSS: 

.container {
    margin: 0 auto;
    width: 450px;
    border: 1px solid red;
    overflow: hidden;
    clear: both;
    margin-top: 20px;
}

#new-box {
    box-sizing: border-box;
    float: left;
    width: 100px;
    height: 100px;
    margin-left: 10px;
    border: 1px solid black;
}
于 2013-03-14T16:27:15.790 に答える