web-dev-qa-db-ja.com

css：div幅が使用可能な幅に拡大するのを防ぎます

Divが拡大しないようにするにはどうすればよいですか？要素を含むdivが、使用可能なスペースを100％占有せず、子が持つ幅を持っていることを望んでいます。親divを水平方向に中央揃えするためにこれが必要です。秘訣は、子要素がfloat：leftまたはdiplay：inline-blockとfluid widthを共有する必要があるため、子要素の行が少なくなる可能性があることです。

レスポンシブデザインが壊れてしまうため、各行を独自のdivでラップすることはできません。

htmlcsscss-floatcss-position
12
vlad

display: table;を使用する必要があります。コンテンツのサイズに縮小され、指定された幅を割り当てることなく、中央に配置して配置することもできます。

デモ http://jsfiddle.net/kevinPHPkevin/9VRzM/

11
Kevin Lynch

子のwidthプロパティをfit-contentに設定できます。そうすることで、これらの要素は必要なだけ水平方向のスペースを占有し、親内で使用できるようになります。

Widthをmax-contentに設定することもできますが、これは親の幅を無視し、コンテンツは子孫が必要とする限り拡張され、場合によっては親をオーバーフローさせます。

例：

問題の設定：

.parent {
  width: 15rem;
  height: 5rem;
  border: 1px solid blue;
}

.child {
  border: 1px solid red;
}
<div class="parent">
  <div class="child">
    Content for child
  </div>
</div>

解決：

.parent {
  width: 15rem;
  height: 5rem;
  border: 1px solid blue;
}

.child {
  width: fit-content;
  border: 1px solid red;
}
<div class="parent">
  <div class="child">
    Content for child
  </div>
</div>

fit-contentのサポートはかなり良いです（ caniuse ？）。この投稿の時点で、IE、Edge、Operaを除くすべてのブラウザでfit-contentが少なくともある程度サポートされています。

1
Henry Woody

親divをその子要素の周りで本当に折りたたむ必要があり（何らかの理由で、達成しようとしていることに基づいて）、そのdivを中央に配置したい場合は、@ Vector's答えは的確です。display: tableとmargin: 0 autoを使用してください。

divを、子供を中央に配置しようとしているコンテナの全幅に拡張したままでも問題がない場合は、特定の状況に応じて、少なくとも2つのオプションがあります。

text-align: centerを使用できます。

.content {
  text-align: center;
  border-style: solid;
  border-width: thin;
}

.content span {
  display: inline;
  border-style: solid;
  border-width: thin;
}
<div class="content">
  <div>Test</div>
  <div>Test</div>
</div>

もちろん、サポートしているブラウザの互換性のレベルに応じて、新しいdisplay: flexをjustify-content: centerと一緒に使用することもできます。

.content {
  display: flex;
  justify-content: center;
  border-style: solid;
  border-width: thin;
}

.content div {
  border-style: solid;
  border-width: thin;
}
<div class="content">
  <div>Test</div>
  <div>Test</div>
</div>
0
Ryan H.

display: inline-blockを使ってみましたか？ DIVはブロック要素であるため、100％の幅を占めます。

0
mitch