Bir div'ı içeriğinden daha büyük olmayan nasıl yapabilirim?

Şuna benzer bir düzen var:

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

Ben divsadece tableolur benim kadar genişlemek istiyorum .

Çözüm ayarlamaktır divTo display: inline-block.

CSS'nin sığması için küçültme genişliği olarak adlandırdığı bir blok öğesi istiyorsunuz ve özellik böyle bir şeyi elde etmek için mübarek bir yol sağlamıyor. CSS2'de, sığacak şekilde küçültmek bir hedef değildir, ancak tarayıcının "ince havadan genişlik" elde etmesi gereken bir durumla uğraşmak anlamına gelir. Bu durumlar:

• şamandıra
• kesinlikle konumlandırılmış eleman
• satır içi blok elemanı
• tablo öğesi

hiçbir genişlik belirtilmediğinde. CSS3'te istediğinizi eklemeyi düşündüklerini duydum. Şimdilik yukarıdakilerden biriyle yapın.

Özelliği doğrudan ortaya çıkarmama kararı garip gelebilir, ancak bunun iyi bir nedeni vardır. Bu pahalı. Sığdırmak için daralt, en az iki kez biçimlendirme anlamına gelir: bir öğenin genişliğini bilmeden biçimlendirmeye başlayamazsınız ve tüm içeriğe sahip olmadan genişliği hesaplayamazsınız. Ayrıca, kişinin düşündüğü kadar sıkı daraltma elemanına ihtiyacı yoktur. Masanızın etrafında neden fazladan div'e ihtiyacınız var? Belki tek ihtiyacınız olan tablo başlığı.

Bence kullanmak

display: inline-block;

ancak tarayıcı uyumluluğundan emin değilim.

Başka bir çözüm div, bir başkasına sarmak olacaktır div(blok davranışını korumak istiyorsanız):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

display: inline-block öğenize fazladan bir kenar boşluğu ekler.

Bunu tavsiye ederim:

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

Bonus: Artık bu yeniyi #elementekleyerek kolayca ortalayabilirsiniz margin: 0 auto.

Deneyebilirsiniz fit-content(CSS3):

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

• Tarayıcı desteği
• Şartname

Benim için işe yarayan:

display: table;

içinde div. ( Firefox ve Google Chrome'da test edilmiştir ).

Daha iyi iki çözüm var

1. display: inline-block;

   VEYA

2. display: table;

Bu ikisinden display:table;daha iyidir, çünkü display: inline-block;ekstra bir marj ekler.

İçin display:inline-block;ekstra boşluk düzeltmek için negatif marj yöntemi kullanabilirsiniz

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack - Satır İçi Blok Şekillendirme için Çapraz Tarayıcı Desteği (2007-11-19) .

Bunun hangi bağlamda görüneceğini bilmiyorum, ama CSS tarzı özelliğin floatya leftda rightbu etkiye sahip olacağına inanıyorum . Öte yandan, metnin etrafında yüzmesine izin vermek gibi başka yan etkileri de olacaktır.

Eğer yanlışsam lütfen beni düzeltin,% 100 emin değilim ve şu anda kendim test edemiyorum.

Sorunuzun cevabı gelecekte olacak arkadaşım ...

yani "intrinsic" en son CSS3 güncellemesiyle geliyor

width: intrinsic;

ne yazık ki IE onunla arkasında, bu yüzden henüz desteklemiyor

Daha fazlası için: CSS İçsel ve Dışsal Boyutlandırma Modülü Seviye 3 ve Kullanabilir miyim? : İçsel ve Dışsal Boyutlandırma .

Şimdilik sen memnun lazım <span>veya <div>ayarlı

display: inline-block;

CSS2 uyumlu bir çözüm aşağıdakileri kullanmaktır:

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

Div'inizi mümkün olduğunca küçük tutacak şekilde yüzebilirsiniz, ancak div'inizdeki herhangi bir şey yüzüyorsa bir düzeltme kullanmanız gerekir :

.my-div
{
    float: left;
}

width:1px;
white-space: nowrap;

benim için iyi çalışıyor :)

Tamam, çoğu durumda varsayılan olarak div'ın olduğu gibi heightve widthotomatik olarak da bir şey yapmanıza gerek yoktur , ancak sizin durumunuz değilse, inline-blockekran uygulamak sizin için çalışacaktır ... sizin için oluşturduğum koda bakın ve neye bakıyorsun:

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>

Bu yorumlarda belirtilmiştir ve cevaplardan birinde bulmak zordur, bu yüzden:

Herhangi bir display: flexnedenle kullanıyorsanız , aşağıdakileri kullanabilirsiniz:

div {
    display: inline-flex;
}

Bu, tarayıcılarda da yaygın olarak desteklenmektedir.

Bunu display: inline;(veya white-space: nowrap;) kullanarak kolayca yapabilirsiniz .

Umarım bunu faydalı bulursun.

inline-block@ User473598 olarak kullanabilirsiniz , ancak eski tarayıcılara dikkat edin.

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

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

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

Mozilla hiç inline-block desteklemez, ancak sahip oldukları -moz-inline-stackyaklaşık olarak aynı olan

inline-blockDisplay özelliği ile ilgili bazı çapraz tarayıcılar : https://css-tricks.com/snippets/css/cross-browser-inline-block/

Bu özelliğe sahip bazı testleri şu adreste görebilirsiniz: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

CSS dosyanıza bir stil koyun

div { 
    width: fit-content; 
}

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

İnsanların bazen tabloları sevmediğini biliyorum, ama size söylemeliyim, css inline hack'leri denedim ve bazı div'lerde çalıştılar, ancak diğerlerinde yoktu, bu yüzden genişleyen div'i içine almak gerçekten daha kolaydı bir tablo ... ve ... satır içi özelliğe sahip olabilir veya olmayabilir ve yine de tablo, içeriğin toplam genişliğini tutacak olan tablodur. =)

Çalışan bir demo burada-

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

CSS3 flexbox çözümüm iki çeşittir: Üstteki bir açıklık gibi davranır ve alttaki bir div gibi davranır ve tüm genişliği bir sargı yardımıyla alır. Sınıfları sırasıyla "üst", "alt" ve "alt sarıcı" dır.

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 class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

Bu, üst div genişliğini en büyük öğe genişliğiyle aynı hale getirir.

Deneyin display: inline-block;. Çapraz tarayıcı uyumlu olması için lütfen aşağıdaki css kodunu kullanın.

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>

Firebug ile uğraşmak Ben -moz-fit-contentOP tam olarak ne istediğini yapar ve aşağıdaki gibi kullanılabilir özellik değeri bulundu :

width: -moz-fit-content;

Yalnızca Firefox'ta çalışmasına rağmen, Chrome gibi diğer tarayıcılar için herhangi bir eşdeğer bulamadım.

Bu kodu deneyebilirsiniz. CSS bölümündeki kodu izleyin.

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>

Etiketin içine display: inline-blockbir spanetiket ekleyerek divve CSS biçimlendirmesini dış divetiketten yeni iç spanetikete taşıyarak benzer bir sorunu ( öğe ortalandığı için kullanmak istemedim ) çözdüm. display: inline blockSize uygun bir cevap değilse , bunu başka bir alternatif fikir olarak dışarı atmak .

Öğede iki yoldan herhangi birini kullanabiliriz div:

display: table;

veya,

display: inline-block; 

Kullanmayı tercih ederim display: table;, çünkü tüm ekstra boşlukları kendi başına işler. Iken display: inline-blockbazı ekstra yer sabitleme gerekir.

div{
  width:auto;
  height:auto;
}

Çizgileri kesen konteynerleriniz varsa, iyi bir CSS çözümü aramak ve hiçbirini bulmaktan saatler sonra, şimdi jQuery kullanıyorum:

$('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>

Gözden geçirilmiş (birden fazla çocuğunuz varsa çalışır): jQuery kullanabilirsiniz (JSFiddle bağlantısına bakın)

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


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

JQuery eklemeyi unutmayın ...

JSfiddle'ı burada görün

Denedim div.classname{display:table-cell;}ve işe yaradı!