1

インライン DIV を互いに等間隔に配置する必要があります。また、境界線と行の最初 (または最後) の DIV の間にも配置する必要があります。等間隔の DIV を持つ Fluid width で見つかったソリューションを使用します。これにより、DIV 間の間隔が等しくなりますが、左の DIV は左の境界線に固定され、右の DIV は右の境界線に固定されます。境界線が互いに離れているのと同じように、境界線から等間隔に配置したいと思います。

更新: コンテンツ DIV は Django によって動的に作成されているため、1 行に何個あるかはわかりません (1 から 4 の間)。

DIV 間の距離に等しい側面に追加のスペースを作成するにはどうすればよいですか?

html は次のとおりです。

    <div class="container">
        <div class="content">
                <canvas width="130" height="130"></canvas>
            </div>
            <div class="content">
                <canvas width="130" height="130"></canvas>
            </div>
            <div class="content">
                <canvas width="130" height="130"></canvas>
            </div>
        </div>

そしてCSS：

div.container {
    width: 100%;
    text-align: justify;
}


div.content {
    display: inline-block;
    width: 20%;
    margin: 0 auto;
}

div.container:after {
    content: "";
    width: 100%;
    display: inline-block;
}
4

2 に答える 2

1

次のように、ボックス レイアウトと特定のパーセンテージのパディングを使用できます (ここでは 10% のパディングを使用しましたが、必要に応じて調整できます)。

http://jsfiddle.net/XXPwW/2/

于 2012-10-03T21:41:01.050 に答える
1

そして、質問をした直後に、答えを見つけました (なんて皮肉なことでしょう?)。誰かが必要な場合に備えて共有します。

私が行ったことは、最初と最後のコンテンツ DIV の前に幅が 0 のスペーサー DIV を作成することでした。これがどのように見えるかです：

HTML:

    <div class="container">
        <div class="spacer"></div>
        <div class="content">
            <canvas width="130" height="130"></canvas>
        </div>
        <div class="content">
            <canvas width="130" height="130"></canvas>
        </div>
        <div class="content">
            <canvas width="130" height="130"></canvas>
        </div>
        <div class="spacer"></div>
    </div>

そしてCSS：

    div.container {
        width: 100%;
        text-align: justify;
    }


    div.content {
        display: inline-block;
        width: 20%;
        margin: 0 auto;
    }

    div.container:after {
        content: "";
        width: 100%;
        display: inline-block;
    }

    div.spacer {
        display: inline-block;
        width: 0;
    }
于 2012-10-03T21:43:01.720 に答える