子要素に合わせる - width html




その内容を超えないようにdivを作る方法は? (20)

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

/* 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://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/ : https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/で確認できますhttps://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

私は次のようなレイアウトを持っています:

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

divが私のtableと同じくらい広がるようにしたいと思いtable


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

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

できるだけ小さくするようにdivを浮動小数点にすることもできますが、div内の何かが浮動小数点の場合は、 clearfixを使う必要があります:

.my-div
{
    float: left;
}

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

width: -moz-fit-content;

Firefoxのみで動作しますが、Chromeなどの他のブラウザではこれと同等の機能は見つかりませんでした。



display: inline-blockはあなたの要素に余分なマージンを加えます。

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

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

display: inline;を使うだけで簡単に実行できますdisplay: inline; (またはwhite-space: nowrap; )。

私はあなたがこれが有用であることを願っています


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

display: table;

または、

display: inline-block; 

私はdisplay: table;を使いたいdisplay: table; これは、それ自身の余分なスペースをすべて処理するためです。 display: inline-blockは余分なスペースが必要です。


OK、多くの場合、デフォルトのdivはautoとしてheightwidthを持っているので、何もする必要はありませんが、あなたのケースではない場合は、 inline-block表示を適用すると...作成したコードを見てくださいあなたのために、それはあなたが探しているものです:

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>


あなたは、CSSが縮み幅に合わせて呼び出すブロック要素を必要とし、そのようなことを得るための祝福された方法を提供しません。 CSS2では、収縮に合わせることは目標ではありませんが、ブラウザが「薄い空気から幅を持たなければならない」状況に対処することを意味します。 そのような状況は次のとおりです。

  • 浮く
  • 絶対配置要素
  • インラインブロック要素
  • 表要素

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

この機能を直接公開しないという決定は奇妙に思えるかもしれませんが、正当な理由があります。 それは高価です。 Shrink-to-fitは、少なくとも2回書式を設定することを意味します。幅を知るまで要素の書式を設定することはできません。また、コンテンツ全体を移動することなく幅を計算することはできません。 さらに、考えられるほど頻繁にシュリンク・ツー・フィットの要素は必要ありません。 なぜあなたのテーブルの周りに余分なdivが必要ですか? たぶん、表のキャプションが必要なだけです。



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

  1. display: inline-block;

    または

  2. display: table;

これらの2つのdisplay:table;うちdisplay:table; 優れている。

display:inline-block; 負のマージンの方法を使用して余分なスペースを修正することができます


コンテナが破損していて、良い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>


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

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


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

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

ここのJSfiddleを見てください


私のCSS3フレックスボックスソリューションは2つの味があります:上の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.


私はdiv.classname{display:table-cell;}を試してみました。


私はちょうどpadding: -whateverYouWantpx;設定するでしょうpadding: -whateverYouWantpx;


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



<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{
  width:auto;
  height:auto;
}






width