1

検索できる CSS の質問はたくさんあるようですが、私の質問に答えるものを見つけることができず、どの解決策もうまくいきません。

親コンテナーの内側に中央に配置され、テキストの内容に基づいて自動幅を持つ、行ごとに 1 つの div の束が必要です。

display: inline-block で管理した自動幅部分ですが、最終的には div が隣り合ってしまいます (親コンテナー内に収まる限り)。

何か助けはありますか？ありがとう！

EDIT：また、私はテーブルルートに行くことを検討しましたが、これは正しいことでしょうか（つまり、複数の行を持つ単一の列を持つテーブル）

編集：例は常に物事をより明確にします...

一連の div を含む列があります。

<div id="giant-column" style="width: 800px; margin: 0 auto;">
  <div class="column-element" style="margin: 0 auto; display: inline-block;">
    <div class="text" style="width: 100%; clear: both;"> ... </div>
    <div class="author" style="float: right;"> ... </div>
  </div>
  ...
</div>

各「列要素」は「テキスト」と同じ幅で、より大きな列「巨大列」の中央に配置したいと思います。これは理にかなっていますか？

4

3 に答える 3

2 
div.column-element{
  margin: 0 auto;
}
于 2012-06-10T21:18:08.653 に答える
0

ハ！考え出した...各行を width: 100%; でラップする別の div 要素が必要でした。

<div id="giant-column" style="width: 800px; margin: 0 auto;">
  <div style="width: 100%;">
  <div class="column-element" style="margin: 0 auto; display: inline-block;">
    <div class="text" style="width: 100%; clear: both;"> ... </div>
    <div class="author" style="float: right;"> ... </div>
  </div>
  </div>
  ...
</div>
于 2012-06-10T21:29:53.440 に答える
0

やってみました

margin:0 auto;

あなたの内側のdivで？

テーブルの設計はそれほど機敏ではないため、良い解決策とは考えていません。テーブルレス設計にはさまざまなオプションがあります。

于 2012-06-10T21:10:47.527 に答える