web-dev-qa-db-ja.com

Divをその内容以下にするにはどうすればいいですか？

以下のようなレイアウトになります。

<div>
    <table>
    </table>
</div>

私は私のdivが私のtableになるのと同じくらい広く拡張することだけを望みます。

htmlcsswidth
1857
George Snider

解決策はdivをdisplay: inline-blockに設定することです。

2206
user473598

CSSがシュリンクフィット幅と呼んでいるものがあり、そのようなことを実現するための恵まれた方法を提供していないブロック要素が必要です。 CSS 2では、縮小表示は目標ではありませんが、ブラウザーが細い空気から幅を「取らなければならない」状況に対処することを意味します。そのような状況は以下のとおりです。

  • float
  • 絶対配置要素
  • インラインブロック要素
  • テーブル要素

幅が指定されていない場合私は彼らがあなたがCSS3に欲しいものを追加することを考えているのを聞いた。今のところ、上記のいずれかでやるようにしてください。

機能を直接公開しないという決定は奇妙に思えるかもしれませんが、正当な理由があります。高価です。縮小縮小は、少なくとも2回の書式設定を意味します。要素の幅がわかるまで要素の書式設定を開始できません。また、コンテンツ全体の幅を計算することはできません。加えて、思うほど頻繁にはめ込み要素を必要としません。なぜあなたはあなたのテーブルの周りに余分なdivが必要なのですか？たぶん、テーブルキャプションだけが必要です。

321
buti-oxa

使っていると思います

display: inline-block;

動作しますが、私はブラウザの互換性についてはよくわかりません。

別の解決策はあなたのdivを別のdivでラップすることです（ブロックの振る舞いを維持したい場合）：

HTML：

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS：

.yourdiv
{
    display: inline;
}
213
mbillard

display: inline-blockは、要素に余白を追加します。

私はこれをお勧めします：

#element {
    display: table; /* IE8+ and all other modern browsers */
}

ボーナス： #elementを追加するだけで、ファンシーな新しいmargin: 0 autoを簡単にセンタリングできます。

198
Salman Abbas
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack - インラインブロックスタイリングのクロスブラウザサポート（2007-11-19） 。

83
kape123

私にとって効果的なのは、

display: table;

divname__内。 （ Firefox および Google Chrome でテスト済み）。

81
Sony Santos

fit-content （CSS3）を試すことができます。

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}
70
Vitalii Fedorenko

2つのより良い解決策があります

  1. display: inline-block;

    OR

  2. display: table;

これら2つのdisplay:table;のうち、 display: inline-block;が余分なマージンを追加するため、より優れています。

display:inline-block;の場合は、余白を修正するためにnegative marginメソッドを使用できます。

57
Shuvo Habib

あなたの質問に対する答えは、将来私の友人にもたらされます。

つまり、 "intrinsic"は最新のCSS3アップデートを伴っています。

width: intrinsic;

残念ながら _ ie _ は後ろにあるのでまだサポートしていません

それについての詳細： CSS組み込み＆外部サイジングモジュールレベル3 と 使用できますか？：組み込み＆外部サイジング 。

今のところ、<span>または<div>を次のように設定して満足する必要があります。

display: inline-block;
41
trojan

これがどのようなコンテキストで表示されるかはわかりませんが、CSSスタイルのプロパティfloat、left、またはrightがこの効果をもたらすと考えています。その一方で、それはまたテキストがそれのまわりで浮かぶことを可能にすることのような他の副作用があるでしょう。

私が間違っている場合は私を修正してください、私は100％わからない、そして現在自分でそれをテストすることはできません。

37
falstro
width:1px;
white-space: nowrap;

私のためにうまくいきます:)

33
Daft Wullie

CSS2互換の解決策は以下を使うことです：

.my-div
{
    min-width: 100px;
}

Divをfloatにすることで可能な限り小さくすることもできますが、div内の何かが浮動している場合は clearfix を使用する必要があります。

.my-div
{
    float: left;
}
30
Soviut

OK、 多くの場合、デフォルトでdivはautoとしてheightとwidthを持っているので何もする必要はありませんが、inline-block displayを適用するとうまくいくでしょう…私はあなたのために創造します、そしてそれはあなたが探していることです：

div {
  display: inline-block;
}
<div>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
      <td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
    </tr>
  </table>
</div>
25
Alireza

display: inline;（またはwhite-space: nowrap;）を使うことで簡単にできます。

これが役に立つことを願っています。

19
miksiii

inline-blockを@ user473598として使用できますが、古いブラウザには注意してください。

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

Mozillaはインラインブロックをまったくサポートしていませんが、-moz-inline-stackを持っています。これはほぼ同じです。

inline-block表示属性に関するクロスブラウザ： https://css-tricks.com/snippets/css/cross-browser-inline-block/ /

あなたはこの属性でいくつかのテストを見ることができます： https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

18
RPichioli

これはコメントで述べられていて、答えの1つでそう見つけることが難しいです：

何らかの理由でdisplay: flexを使用している場合は、代わりに以下を使用できます。

div {
    display: inline-flex;
}

これはブラウザ間で広くサポートされています。

18
youngrrrr
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>

    <div id="content_lalala">
        this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
    </div>

</td>
</tr>
</table>

私は人々が時々テーブルを好きではないことを知っていますが、私はあなたに言わなければならない、私はCSSインラインハックを試してみました、そしてテーブル...そして...それはインラインプロパティを持つことも持たないこともできますが、それでもテーブルはコンテンツの全幅を保持することになるものです。 =）

17
Edward

実用的なデモはこちら - 

.floating-box {
    display:-moz-inline-stack;
    display: inline-block;

    width: fit-content; 
    height: fit-content;

    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}
<h2>The Way is using inline-block</h2>

Supporting elements are also added in CSS.

<div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
</div>
15
Abrar Jahin

CSSファイルにスタイルを追加するだけです

div { 
    width: fit-content; 
}
14
Hamza

2つのフレーバーの私のCSS3 flexboxソリューション：上のものはスパンのように振る舞い、下のものはdivのように振る舞い、ラッパーの助けを借りてすべての幅を取ります。それらのクラスはそれぞれ "top"、 "bottom"、 "bottomwrapper"です。

body {
    font-family: sans-serif;
}
.top {
    display: -webkit-inline-flex;
    display: inline-flex;
}
.top, .bottom {
    background-color: #3F3;
    border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
    display: -webkit-flex;
    display: flex;
}
table {
    border-collapse: collapse;
}
table, th, td {
    width: 280px;
    border: 1px solid #666;
}
th {
    background-color: #282;
    color: #FFF;
}
td {
    color: #444;
}
th, td {
    padding: 0 4px 0 4px;
}
Is this
<div class="top">
        <table>
        <tr>
            <th>OS</th>
            <th>Version</th> 
        </tr>
        <tr>
            <td>OpenBSD</td>
            <td>5.7</td> 
        </tr>
        <tr>
            <td>Windows</td>
            <td>Please upgrade to 10!</td> 
        </tr>
    </table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
    <div class="bottom">
        <table>
            <tr>
                <th>OS</th>
                <th>Version</th> 
            </tr>
            <tr>
                <td>OpenBSD</td>
                <td>5.7</td> 
            </tr>
            <tr>
                <td>Windows</td>
                <td>Please upgrade to 10!</td> 
            </tr>
        </table>
    </div>
</div>
this is what you are looking for.
13
user6558785

display: inline-block;を試してください。クロスブラウザ互換にするには、以下のCSSコードを使用してください。

div {
  display: inline-block;
  display:-moz-inline-stack;
  zoom:1;
  *display:inline;
  border-style: solid;
  border-color: #0000ff;
}
<div>
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>
</div>
12
James
<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

これは親divの幅を最大の要素の幅と同じにします。

12
Jaimin Dave

Firebugを改ざんした私は、OPが望んでいたことを正確に実行し、次のように使用できるプロパティ値-moz-fit-contentを見つけました。

width: -moz-fit-content;

Firefoxでしか動作しませんが、Chromeなど他のブラウザに相当するものは見つかりませんでした。

10
Hamed Momeni

div要素では、2つの方法のいずれかを使用できます。

display: table;

または、

display: inline-block;

私はdisplay: table;を使うことを好みます、なぜならそれはすべての余分なスペースをそれ自身で処理するからです。 display: inline-blockはいくらかの追加のスペース修正を必要としますが。

7
Novice

spanタグの内側にdivタグを追加し、CSSのフォーマット設定を外側のdivタグから新しい内側のspanタグに移動することで、同様の問題を解決しました（アイテムが中央に配置されていたためdisplay: inline-blockを使用したくありませんでした）。 display: inline blockがあなたにふさわしい答えではない場合は、これを別の代替案としてそこに出すだけです。

7
Jessica Brown
div{
  width:auto;
  height:auto;
}
6
AJchandu

改訂（複数の子供がいる場合は動作します）：jQueryを使用できます（JSFiddleリンクを見てください）

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

JQueryを含めることを忘れないでください...

こちらのJSfiddleを参照してください

5
Ogdila

数時間後に適切なCSSソリューションを探して何も見つからなかった後、コンテナーが行を壊している場合は、代わりに 現在使用しています jQuery：

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});
nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ddd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>
5
cregox

padding: -whateverYouWantpx;を設定するだけです

4
NathanielSantley

私はdiv.classname{display:table-cell;}を試しました、そしてそれはうまくいきました！

4
UnLoCo

親要素にdisplay: flexを使用できます

#parentElement {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
4
ZhenyaUsenko

このコードを試すことができます。 cssセクションのコードに従ってください。

div {
  display: inline-block;
  padding: 2vw;
  background-color: green;
}

table {
  width: 70vw;
  background-color: white;
}
<div>
    <table border="colapsed">
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      
    </table>
</div>
2
Showrin Barua

グローバル変数を定義し、それを両方に使用するとどうなりますか。

:root {
    --table-width: 400px;
}

.container{
     width:var(--table-width);
     border: 1px solid black;   // easy visualization
}
.inner-table {
     width:var(--table-width);
     border: 1px solid red;   // easy visualization
}
<div class="container">
    <table class="inner-table">
       <tr>
           <td>abc</td>
       </tr>
    </table>
</div>
0
Harshana

私はspanの中にdivを入れていて、margin: autoをコンテナーdivに設定するだけでうまくいきました。

0
Vinay Mehta

個人的に、私はこれを単純にします：

HTMLコード

<div>
    <table>
    </table>
</div>

CSSコード：

div {
    display: inline;
}

あなたがあなたのdivにフロートを適用するならば、それはあまりにもうまくいきます、しかし明らかに、あなたは次のHTML要素で「両方をクリアする」CSS規則を適用する必要があります。

0
Nicolas Talichet

単に

<div style="display: inline;">
    <table>
    </table>
</div>
0
Zeke