1

私はdivの中に を持っていますdiv

<div id="out" align="center">
      <div id="in1" align="left">111</div>
      <div id="in2" align="left">aaaaaaaaaaaaaaaaaaaaaa</div>
      <div id="in3" align="left">bbbb</div>
      <div id="in4" align="left">6516519191</div>
      <div id="in5" align="left">apple</div>
      <div id="in6" align="left">ii</div>
</div>

期待される結果は、div中心に配置された size=(div size 内の最大) です。次に、その中のアイテムはすべて左揃えになります。

                         111
                         aaaaaaaaaaaaaaaaaaaaaa
                         bbbb
                         6516519191
                         apple
                         ii

width以前のアイテムのサイズがわからないので、外側のdivに渡したくありません。

何か方法はありますか？

4

3 に答える 3

2

別の (外側の) コンテナー div を挿入することで可能になります。

  • 外側の div コンテナー: 幅 100%、中央揃えのテキスト配置。
  • 内部 div コンテナー: インライン ブロックと左テキストの配置

CSS

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

#innerContainer {
    display: inline-block;
    text-align: left;
}

HTML

<div id="outerContainer">
    <div id="innerContainer">
        <div id="in1">111</div>
        <div id="in2">aaaaaaaaaaaaaaaaaaaaaa</div>
    </div>
</div>

デモの実行: http://jsfiddle.net/nvMmx/

于 2013-06-19T16:21:36.223 に答える
0

外側を設定するwidth:100%; か、内側の幅を定義します

CSS

.abc{
float:left;
width:100%;
}

HTML

<div id="out" align="center">
      <div id="in1" class="abc">111</div>
      <div id="in2" class="abc">aaaaaaaaaaaaaaaaaaaaaa</div>
      <div id="in3" class="abc">bbbb</div>
      <div id="in4" class="abc">6516519191</div>
      <div id="in5" class="abc">apple</div>
      <div id="in6" class="abc">ii</div>
</div>
于 2013-06-19T16:04:53.523 に答える