1

親divタグにn個の子divタグを保持させて、それらがすべて同じ行にあるが、中央にグループ化されるようにしようとしています。例えば：

ここに画像の説明を入力

ここでは、子は青、親は赤です。

私が試したことは次のとおりです。

  • 青い div を display:inline にして、同じ行に表示します。問題: 幅と高さの両方を 10px に設定しても表示されません 。
  • 青い div を float:left にします。問題: div がフローティングされているため、赤の親から子のコンテンツのサイズをプログラムで変更し、親の中央に配置して、必要なものを取得する必要があります。JavaScriptを含まない解決策があるはずです。
4

4 に答える 4

4

IE6 と IE7 の互換性のために、子 CSS にzoom:1;およびを追加する必要がある場合があります。*display:inline;

jsフィドル

.parent {width:100%;border:1px solid red;text-align:center;}
.child {width:15%;display:inline-block;border:1px solid blue;}
于 2013-05-02T13:59:27.547 に答える
2 
<style>
.container {
  width: 100%;
  padding: 0;
  text-align: center;
  border: 1px solid red;
}

.inner {
  display: inline-block;
  margin: 0 5px;
  border: 1px solid blue;
}
</style>

<div class="container">
  <div class="inner">
    one
  </div>
  <div class="inner">
    two
  </div>
  <div class="inner">
    three
  </div>
</div>
于 2013-05-02T13:59:45.950 に答える
0

使用してみてくださいdisplay: inline-block;：

.child {
    display: inline-block;
    ...
}

http://jsfiddle.net/mupuR/

于 2013-05-02T13:59:39.557 に答える
0

青色の div をコンテナー div に貼り付けます。それらの幅 (マージンとパディングを含む) を見つけて、コンテナ div にその幅を与えます。次に、コンテナ div のマージンを に設定0 autoし、赤い div に貼り付ければ問題ありません。

于 2013-05-02T13:59:15.033 に答える