Div'in i├žeri─činden daha b├╝y├╝k de─čil nas─▒l yap─▒l─▒r?


Al─▒nan cevaba git


┼×una benzer bir d├╝zenim var:

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

Ben istiyorum div sadece kadar geni┼č benim kadar geni┼čletmek i├žin table olur.


1947





2009-01-16




Cevap say─▒s─▒n─▒ say: 30






├ç├Âz├╝m ayarlamakt─▒r div To display: inline-block .


2304







CSSÔÇÖin s─▒─čd─▒rmaya uygun geni┼člik olarak adland─▒rd─▒─č─▒ ve ├Âzellik b├Âyle bir ┼čey elde etmek i├žin kutsanm─▒┼č bir yol sa─člamaz. CSS2'de, s─▒─čd─▒rmaya uygun k├╝├ž├╝ltmek bir ama├ž de─čildir, ancak taray─▒c─▒n─▒n "ince havadan geni┼člik kazanmas─▒" gerekti─či bir durumla ba┼ča ├ž─▒kmak anlam─▒na gelir. Bu durumlar:

  • ┼čamand─▒ra
  • kesinlikle konumlanm─▒┼č eleman
  • sat─▒r i├ži blok eleman─▒
  • masa eleman─▒

Belirtilen geni┼člik olmad─▒─č─▒nda. CSS3'te istedi─činizi eklemeyi d├╝┼č├╝nd├╝klerini duydum. ┼×imdilik, yukar─▒dakilerden birini yap.

├ľzelli─či do─črudan g├Âstermeme karar─▒ garip g├Âr├╝nebilir, ancak bunun iyi bir nedeni var. Bu pahal─▒. K├╝├ž├╝ltmeye s─▒─čd─▒r, en az iki kez bi├žimlendirme anlam─▒na gelir: bir ├Â─čenin geni┼čli─čini ├Â─črenene kadar bi├žimlendirmeye ba┼člayamazs─▒n─▒z ve i├žeri─čin tamam─▒ndan ge├žen geni┼čli─či hesaplayamazs─▒n─▒z. Art─▒, ki┼činin sand─▒─č─▒ kadar s─▒k ÔÇőÔÇős─▒k─▒la┼čt─▒r─▒lan bir elemana ihtiyac─▒ yoktur. Masan─▒z─▒n ├ževresinde neden ekstra div'e ihtiyac─▒n─▒z var? Belki de tablo yaz─▒s─▒ tek ihtiyac─▒n─▒z olan ┼čeydir.


324







Kullanarak d├╝┼č├╝n├╝yorum

 display: inline-block;
 

i┼če yarar, ancak taray─▒c─▒ uyumlulu─ču konusunda emin de─čilim.


Ba┼čka bir ├ž├Âz├╝m, sizi bir div ba┼čkas─▒na sarmakt─▒r div (blok davran─▒┼č─▒n─▒ korumak istiyorsan─▒z):

HTML:

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

CSS:

 .yourdiv
{
    display: inline;
}
 

219







display: inline-block elementinize ekstra bir marj ekler.

Bunu tavsiye ederim:

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

Bonus: Art─▒k #element sadece ekleyerek kolayca bu fantaziyi ortalayabilirsiniz margin: 0 auto .


208







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

Foo Hack - Sat─▒r i├ži blok Stil i├žin ├çapraz Taray─▒c─▒ Deste─či (2007-11-19) .


84







Benim i├žin ├žal─▒┼čan ┼čey:

 display: table;
 

i├žinde div . ( Firefox ve Google Chrome'da test edilmi┼čtir ).


82







Deneyebilirsiniz fit-content (CSS3):

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

78







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


70







Sorunuzun cevab─▒n─▒ gelecekte yat─▒yor arkada┼č─▒m ...

yani "intrinsic" en son CSS3 g├╝ncellemesiyle geliyor

 width: intrinsic;
 

ne yaz─▒k ki IE onunla birlikte kald─▒, bu y├╝zden hen├╝z desteklemiyor.

Daha fazla: 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;
 

41







Bunun hangi ba─člamda g├Âr├╝nece─čini bilmemekle birlikte, CSS tarz─▒ ├Âzelli─čin float ya left da right bu etkiye sahip olaca─č─▒na inan─▒yorum . ├ľte yandan, metnin etraf─▒nda y├╝zmesine izin vermek gibi ba┼čka yan etkileri de olacakt─▒r.

L├╝tfen yanl─▒┼č olsam beni d├╝zelt,% 100 emin de─čilim ve ┼ču anda kendim test edemiyorum.


39







 width:1px;
white-space: nowrap;
 

benim i├žin iyi ├žal─▒┼č─▒yor :)


34







CSS2 uyumlu bir ├ž├Âz├╝m kullanmakt─▒r:

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

Ayr─▒ca, div'inizi olabildi─čince k├╝├ž├╝k bir ┼čekilde zorlayabilmesi i├žin y├╝zebilirsiniz, ancak div'in i├žinde bir ┼čey y├╝z├╝yorsa bir d├╝zeltme kullanman─▒z gerekir :

 .my-div
{
    float: left;
}
 

33







Tamam, bir├žok durumda bile vard─▒r varsay─▒lan div taraf─▒ndan olarak bir ┼čey yapman─▒za gerek yoktur height ve width oto olarak, ancak uygulayarak, senin durumda de─čilse inline-block sizin i├žin ekran ├žal─▒┼čaca─č─▒m ... g├Âr├╝n├╝m senin i├žin olu┼čturmak kodu ve en do 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> 


25







Bu yorumlarda bahsedilmi┼čtir ve cevaplardan birinde bulmak zordur:

Herhangi bir display: flex nedenle kullan─▒yorsan─▒z , bunun yerine kullanabilirsiniz:

 div {
    display: inline-flex;
}
 

Bu, taray─▒c─▒larda da yayg─▒n olarak desteklenir.


21







Basit├že display: inline; (veya white-space: nowrap; ) kullanarak yapabilirsiniz .

Umar─▒m bunu faydal─▒ buluyorsunuz.


19







inline-block @ User473598 olarak kullanabilirsiniz , ancak eski taray─▒c─▒lardan sak─▒n─▒n.

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

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

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

Mozilla, sat─▒r i├ži blo─ču hi├ž desteklemiyor, ancak -moz-inline-stack hangisinin ayn─▒ oldu─ču

inline-block Ekrandaki baz─▒ ├žapraz taray─▒c─▒ ├Âzelli─či: https://css-tricks.com/snippets/css/cross-browser-inline-block/

Bu nitelikte baz─▒ testleri g├Ârebilirsiniz: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/


18







 <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 masalar─▒ sevmedi─čini biliyorum, ama ┼čunu s├Âylemeliyim ki, css inline hack'leri denedim, ve baz─▒ div'lerde ├žal─▒┼čt─▒lar ama di─čerlerinde yapmad─▒lar, bu y├╝zden geni┼čleyen div'i i├žine almak ger├žekten daha kolayd─▒. bir tablo ... ve ... sat─▒r i├ži ├Âzelli─čine sahip olabilir veya olmayabilir ve yine de tablo i├žeri─čin toplam geni┼čli─čini tutacak oland─▒r. =)


18







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


15







Sadece CSS dosyan─▒za bir stil yerle┼čtirin

 div { 
    width: fit-content; 
}
 

15







─░ki ├že┼čit CSS3 flexbox ├ž├Âz├╝m├╝m: ├ťstte bir a├ž─▒kl─▒k gibi davran─▒yor ve altta bir div gibi davran─▒yor, t├╝m geni┼čli─či bir sarmalay─▒c─▒ yard─▒m─▒yla al─▒yor. 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. 


13


2016-07-14





 <div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>
 

Bu, ebeveyn div geni┼čli─čini en b├╝y├╝k eleman geni┼čli─čiyle ayn─▒ hale getirecektir.


12







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


12







Firebug ile u─čra┼čmak -moz-fit-content , OP'nin istedi─čini ve a┼ča─č─▒daki ┼čekilde kullan─▒labilece─čini tam olarak yapan ├Âzellik de─čerini buldum :

 width: -moz-fit-content;
 

Yaln─▒zca Firefox'ta ├žal─▒┼čsa da, Chrome gibi di─čer taray─▒c─▒lar i├žin e┼čde─čer bulamad─▒m.


10







Etiketin i├žine display: inline-block bir span etiket ekleyerek div ve CSS bi├žimlendirmesini d─▒┼č div etiketten yeni i├ž span etikete ta┼č─▒yarak benzer bir sorunu ( madde merkezlendi─činden kullanmak istemedi─čim ) ├ž├Âzd├╝m. Bunu display: inline block sizin i├žin uygun bir cevap de─čilse , ba┼čka bir alternatif fikir olarak atman─▒z yeterli.


7







div Eleman ├╝zerindeki iki yoldan herhangi birini kullanabiliriz :

 display: table;
 

veya,

 display: inline-block; 
 

Kullanmay─▒ tercih ederim display: table; , ├ž├╝nk├╝ t├╝m ekstra alanlar─▒ kendi kendine idare ediyor. display: inline-block Baz─▒ ekstra alan sabitleme ihtiyac─▒ olsa da .


7







 div{
  width:auto;
  height:auto;
}
 

6







E─čer iyi bir CSS ├ž├Âz├╝m arayan ve hi├žbiri bulma saat sonra, ├žizgiler k─▒rma konteyner varsa, ┼čimdi kulland─▒─č─▒m─▒z yerine 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







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'i eklemeyi unutma ...

JSfiddle'─▒ burada g├Âr├╝n


5







Denedim div.classname{display:table-cell;} ve i┼če yarad─▒!


4







Sadece kurard─▒m padding: -whateverYouWantpx;


4



─░lgili yay─▒nlar


EditText'i Android'de XML ile d├╝zenlenemez hale nas─▒l getirebilirim?

ÔÇťDo─čru ko┼čul de─čilseÔÇŁ nas─▒l yap─▒l─▒r?

ArrayList nas─▒l kopyalan─▒r ve i├žeri─či nas─▒l kopyalan─▒r?

Div arka plan rengini CSS'de saydam yapma

<div> <td> y├╝ksekli─čini doldurma nas─▒l yap─▒l─▒r

saveAsTextFile NOT'u ├ž─▒kt─▒y─▒ birden fazla dosyaya b├Âlme nas─▒l yap─▒l─▒r?

Etkinlik olu┼čtururken EditText'e odaklanma nas─▒l yap─▒l─▒r

Form_rest () i┼člevinin Symfony2 ile bir alan g├Âstermemesi nas─▒l yap─▒l─▒r?

Div kalan y├╝ksekli─či i┼čgal yapmak nas─▒l?

Div'in jQuery ile sorunsuz bir ┼čekilde kayd─▒rma yapmas─▒n─▒ nas─▒l sa─člayabilirim?

Etiketle ilgili di─čer sorular [html]


Div'in i├žeri─činden daha b├╝y├╝k de─čil nas─▒l yap─▒l─▒r?

Ruby on Rails ge├ži┼čindeki bir veritaban─▒ s├╝tununu nas─▒l yeniden adland─▒rabilirim?

'─░nput' ├Â─česinin bilinen bir ├Âzelli─či olmad─▒─č─▒ i├žin 'ngModel' ├Â─česine ba─član─▒lam─▒yor

git LF'yi CRLF ile de─či┼čtirmek

Python kodunu nas─▒l korurum?

Android geli┼čtirme ara├žlar─▒yla Eclipse'i g├╝ncelleme v. 23

Belirli bir anahtar─▒n bir karma i├žinde olup olmad─▒─č─▒n─▒ kontrol etme?

Bir JavaScript de─či┼čkeni nas─▒l ayarlan─▒r?

# 1071 - Belirtilen anahtar ├žok uzundu; maksimum anahtar uzunlu─ču 767 baytt─▒r

C++ ┼čablon i┼člevi tan─▒mlar─▒n─▒ bir .CPP dosyas─▒nda saklamak