2

私は3つのdivを取得し、それらを含むdivに水平に（互いに隣接して）スタックすることを検討しています。この包含divは流動的な幅を持っているため、ブラウザーが拡大縮小されると（これはレスポンシブデザイン用です）、3つの子divが比例して拡大縮小されます。さらに、3つの子divは、左端のdivが左側にあり、中央のdivが中央に配置され、右端のdivがdivを含む右側に完全に配置されるように個別に配置する必要があります。

コンテナdivをdisplay：tableに設定し、3つの子divをdisplay：table-cellに設定して、これを実現しようとしました。これは、3つの子divを邪魔にならないように配置できないことを除いて、うまく機能します。上で説明しました。親divでborder-spacingを試しました。しかし、これは私の目標ではうまくいきません。

これが私のフィドルのコードです：http：//jsfiddle.net/mkerny45/97mt7/7/

目的の結果のスクリーンショット：http：//d.pr/i/KUfd （ここでは、3つの子divが表示されます：含まれているdivの左、中央、右。左と右のdivは左/右にずっとあります。それぞれ、中央のdivは包含divの中央にあります。マージンも写真に示されています。包含divと子div全体を比例して縮小し、子divを常に適切な場所に配置したままにします。）

コード 

<div class="articles">
  <article>
    <img src="http://placehold.it/380x214/000000&text=Left" />
  </article>

  <article>
    <img src="http://placehold.it/380x214/3D6AA2&text=Middle" />
  </article>

  <article>
    <img src="http://placehold.it/380x214/98BD56&text=Right" />
  </article>
</div>

4

1 に答える 1

2

text-align:justify を使用してこれを実現し、div を均等に配置して、端まで揃えます。次に、幅 100% のスパン クラスを追加して、ラッパーの幅を強制します。

デモ -> http://jsfiddle.net/spUKQ/2/

HTML

<div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <span class="stretch"></span>
</div>

CSS

#container {
    border: 2px dashed #444;
    height: 125px;

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */
    min-width: 612px;
}

.box1, .box2, .box3 {
    width: 150px;
    height: 125px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

/* just for demo */
.box1, .box3 {
    background: #ccc
}
.box2 {
    background: #0ff
}
于 2013-01-09T17:06:47.327 に答える