2359

次のようなレイアウトがあります。

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

私はdiv、私がなるまで拡大するだけにしたいと思いtableます。

4

42 に答える 42

2685

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

于 2010-10-12T16:47:57.150 に答える
356

CSSが縮小してフィットする幅と呼ぶものを備えたブロック要素が必要であり、仕様はそのようなものを取得するための祝福された方法を提供していません。CSS2では、縮小して適合させることは目標ではありませんが、ブラウザーが薄い空気から幅を「取得しなければならない」状況に対処することを意味します。それらの状況は次のとおりです。

  • 浮く
  • 絶対位置の要素
  • インラインブロック要素
  • テーブル要素

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

機能を直接公開しないという決定は奇妙に思えるかもしれませんが、正当な理由があります。高いです。縮小して合わせるとは、少なくとも2回フォーマットすることを意味します。要素の幅がわかるまで、要素のフォーマットを開始することはできません。また、コンテンツ全体を通過しない幅を計算することもできません。さらに、考えられるほど頻繁に縮小してフィットする要素は必要ありません。なぜテーブルの周りに追加のdivが必要なのですか？たぶん、テーブルのキャプションだけが必要です。

于 2009-01-16T16:40:24.180 に答える
249

使っていると思います

display: inline-block;

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

div別の解決策は、別のものでラップするdivことです（ブロックの動作を維持したい場合）：

HTML：

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

CSS：

.yourdiv
{
    display: inline;
}
于 2009-01-16T16:41:43.363 に答える
246

display: inline-block要素にマージンを追加します。

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

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

おまけ:#elementを追加するだけで、ファンシーな新しいものを簡単に中央に配置できるようになりましたmargin: 0 auto。

于 2012-05-12T23:39:02.783 に答える
164

あなたが試すことができますfit-content（CSS3）：

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}
于 2013-05-27T00:41:54.347 に答える
104

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

  1. display: inline-block;

    また

  2. display: table;

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

display:inline-block;負のマージン メソッドを使用して、余分なスペースを修正できます。

于 2016-05-10T20:16:25.937 に答える
90

私のために働くものは次のとおりです。

display: table;

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

于 2012-01-11T12:01:10.487 に答える
85 
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack – インライン ブロック スタイルのクロス ブラウザ サポート (2007-11-19) .

于 2010-08-25T19:36:26.493 に答える
48

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

私が間違っている場合は修正してください。100% 確信があるわけではなく、現在自分でテストすることはできません。

于 2009-01-16T16:08:27.237 に答える
44

あなたの質問に対する答えは、私の友人の未来にあります...

つまり、「組み込み」は最新の CSS3 アップデートで提供されます。

width: intrinsic;

残念ながら、 IEは遅れているため、まだサポートされていません。

詳細: CSS Intrinsic & Extrinsic Sizing Module Level 3 and Can I Use? : 本質的および外的サイジング。

今のところ、満足する<span>か、<div>設定する必要があります

display: inline-block;
于 2013-12-11T13:07:16.147 に答える
39 
width:1px;
white-space: nowrap;

私にとってはうまくいきます:)

于 2011-08-26T08:14:09.403 に答える
37

CSS2 互換のソリューションは、次を使用することです。

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

div をできるだけ小さくすることもできますが、div 内の何かがフローティングしている場合はclearfixを使用する必要があります。

.my-div
{
    float: left;
}
于 2009-01-16T16:13:07.183 に答える
20 
<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インラインハックを試しました。それらはいくつかのdivで機能しましたが、他のdivでは機能しなかったので、拡張divを囲む方が本当に簡単でした。テーブル...そして...インラインプロパティを持つことも持たないこともできますが、それでもテーブルはコンテンツの全幅を保持するものです。=）

于 2011-08-03T16:59:09.537 に答える
20

display: inline;（または）を使用するだけで簡単に実行できますwhite-space: nowrap;。

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

于 2014-10-05T09:36:06.453 に答える
15

動作するデモはこちらです-

.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>

于 2016-03-23T09:45:09.703 に答える
12

2 つのフレーバーの私の CSS3 フレックスボックス ソリューション: 上部の 1 つはスパンのように動作し、下部の 1 つは div のように動作し、ラッパーの助けを借りてすべての幅を取ります。それらのクラスは、それぞれ「トップ」、「ボトム」、「ボトムラッパー」です。

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.

于 2016-07-14T19:33:56.260 に答える
11

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

width: -moz-fit-content;

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

于 2012-06-06T09:54:56.863 に答える
7

タグ内にタグを追加し、CSS フォーマットを外側のタグから新しい内側のタグに移動することで、同様の問題 (display: inline-block項目が中央に配置されていたため使用したくなかった) を解決しました。あなたにとって適切な答えでない場合は、別の代替案としてこれを捨てるだけです。spandivdivspandisplay: inline block

于 2012-08-25T18:54:02.907 に答える
7

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

display: table;

また、

display: inline-block;

display: table;すべての余分なスペースを単独で処理するため、私は を使用することを好みます。余分なスペースをdisplay: inline-block修正する必要があります。

于 2016-09-30T05:00:55.360 に答える
6 
div{
  width:auto;
  height:auto;
}
于 2016-12-06T19:36:51.180 に答える
5

コンテナーが改行していて、何時間もかけて適切な 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>

于 2015-11-04T03:24:41.010 に答える
5

改訂済み (複数の子供がいる場合に機能します): jQuery を使用できます (JSFiddle リンクを参照してください)

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


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

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

ここでJSfiddleを参照してください

于 2014-09-29T06:08:24.327 に答える
4

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

于 2013-03-07T17:37:59.793 に答える
3

私はspan内部にいて、コンテナdivに設定するだけでうまくいきました。margin: autodiv

于 2019-06-04T07:35:52.127 に答える
1

個人的には、私は単にこれを行います：

HTML コード:

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

CSS コード:

div {
    display: inline;
}

div にフロートを適用する場合も機能しますが、明らかに、次の HTML 要素で「両方をクリアする」CSS ルールを適用する必要があります。

于 2015-05-24T15:32:56.627 に答える
-3

これは、すべてのブラウザで問題なく機能するようです。例は、私がオンラインやニュースレターで使用している実際の広告です。divの内容を変更するだけです。指定したパディングの量に合わせて調整およびシュリンクラップします。

<div style="float:left; border: 3px ridge red; background: aqua; padding:12px">
    <font color=red size=4>Need to fix a birth certificate? Learn <a href="http://www.example.com">Photoshop in a Day</a>!
    </font>
</div>
于 2012-04-29T21:01:37.613 に答える