ฉันจะทำให้ div ไม่ใหญ่กว่าเนื้อหาได้อย่างไร

ฉันมีเค้าโครงคล้ายกับ:

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

ฉันต้องการdivขยายให้กว้างเท่าที่ฉันtableต้องการ

การแก้ปัญหาคือการตั้งค่าของคุณจะdivdisplay: inline-block

คุณต้องการองค์ประกอบบล็อกที่มีสิ่งที่ CSS เรียกว่าลดขนาดให้พอดีกับความกว้างและสเป็คไม่ได้ให้วิธีการที่มีความสุขที่จะได้รับสิ่งดังกล่าว ใน CSS2 การย่อขนาดไม่ได้เป็นเป้าหมาย แต่หมายถึงการจัดการกับสถานการณ์ที่เบราว์เซอร์ "ต้อง" รับความกว้างจากอากาศที่บาง สถานการณ์เหล่านั้นคือ:

• ลอย
• องค์ประกอบตำแหน่งอย่างแน่นอน
• องค์ประกอบแบบอินไลน์บล็อก
• องค์ประกอบตาราง

เมื่อไม่มีการระบุความกว้าง ฉันได้ยินว่าพวกเขาคิดว่าจะเพิ่มสิ่งที่คุณต้องการใน CSS3 สำหรับตอนนี้ให้ทำกับหนึ่งในข้างต้น

การตัดสินใจไม่เปิดเผยคุณสมบัติโดยตรงอาจดูแปลก แต่มีเหตุผลที่ดี มันแพง. ย่อขนาดให้พอดีหมายถึงการจัดรูปแบบอย่างน้อยสองครั้ง: คุณไม่สามารถเริ่มการจัดรูปแบบองค์ประกอบจนกว่าคุณจะทราบความกว้างและคุณไม่สามารถคำนวณความกว้างที่ไม่มีเนื้อหาทั้งหมด นอกจากนี้องค์ประกอบหนึ่งไม่จำเป็นต้องมีองค์ประกอบที่หดตัวได้บ่อยเท่าที่คิด ทำไมคุณต้องการ div พิเศษรอบโต๊ะของคุณ บางทีคำบรรยายตารางเป็นสิ่งที่คุณต้องการ

ฉันคิดว่าใช้

display: inline-block;

จะทำงานได้ แต่ฉันไม่แน่ใจเกี่ยวกับความเข้ากันได้ของเบราว์เซอร์

อีกวิธีหนึ่งคือการห่อของคุณdivในอีกdiv(ถ้าคุณต้องการรักษาพฤติกรรมบล็อก):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

display: inline-block เพิ่มระยะขอบพิเศษให้กับองค์ประกอบของคุณ

ฉันอยากจะแนะนำสิ่งนี้:

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

โบนัส:คุณยังสามารถนี้ได้อย่างง่ายดายศูนย์แฟนซีที่ใหม่เพียงโดยการเพิ่ม#elementmargin: 0 auto

คุณสามารถลองfit-content(CSS3):

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

• รองรับเบราว์เซอร์
• สเปค

อะไรที่เหมาะกับฉันคือ:

display: table;

divใน (ทดสอบบนFirefoxและGoogle Chrome )

มีสองวิธีที่ดีกว่า

1. display: inline-block;

   หรือ

2. display: table;

จากสองdisplay:table;สิ่งนี้ดีกว่าเพราะdisplay: inline-block;เพิ่มระยะขอบพิเศษ

สำหรับdisplay:inline-block;คุณสามารถใช้วิธีการมาร์จิ้นติดลบเพื่อแก้ไขพื้นที่พิเศษ

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

ฟูสับ - การสนับสนุนเบราว์เซอร์ครอสจัดแต่งทรงผมอินไลน์บล็อก (2007/11/19)

ไม่ทราบว่าในบริบทนี้สิ่งที่จะปรากฏ แต่ผมเชื่อว่าคุณสมบัติ CSS สไตล์floatอย่างใดอย่างหนึ่งleftหรือrightจะมีผลกระทบนี้ ในทางกลับกันก็จะมีผลข้างเคียงอื่น ๆ เช่นการอนุญาตให้ข้อความลอยอยู่รอบ ๆ

โปรดแก้ไขให้ฉันถ้าฉันคิดผิดฉันไม่แน่ใจ 100% และไม่สามารถทดสอบด้วยตัวเองได้ในขณะนี้

คำตอบสำหรับคำถามของคุณวางในอนาคตเพื่อนของฉัน ...

กล่าวคือ "ภายใน" กำลังมาพร้อมกับการอัปเดต CSS3 ล่าสุด

width: intrinsic;

น่าเสียดายที่IEอยู่ข้างหลังมันดังนั้นจึงยังไม่รองรับ

เพิ่มเติมเกี่ยวกับมัน: CSS Intrinsic & Extrinsic Sizing Module Level 3และฉันสามารถใช้ได้หรือไม่? : ภายในและภายนอกขนาด

สำหรับตอนนี้คุณต้องพอใจ<span>หรือ<div>ตั้งค่าให้

display: inline-block;

โซลูชันที่เข้ากันได้กับ CSS2 คือการใช้:

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

คุณสามารถลอย div ของคุณซึ่งจะบังคับให้เล็กที่สุดเท่าที่จะเป็นไปได้ แต่คุณจะต้องใช้clearfixหากมีอะไรใน div ของคุณลอย:

.my-div
{
    float: left;
}

width:1px;
white-space: nowrap;

ทำงานได้ดีสำหรับฉัน :)

ตกลงในหลายกรณีคุณไม่จำเป็นต้องทำสิ่งใดตามค่าเริ่มต้น div heightและwidthอัตโนมัติ แต่ถ้าไม่ใช่กรณีของคุณการใช้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>

สิ่งนี้ถูกกล่าวถึงในความคิดเห็นและหายากในคำตอบข้อหนึ่งดังนี้:

หากคุณใช้display: flexด้วยเหตุผลใดก็ตามคุณสามารถใช้:

div {
    display: inline-flex;
}

สิ่งนี้ได้รับการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์

คุณสามารถทำได้โดยใช้display: inline;(หรือwhite-space: nowrap;)

ฉันหวังว่าคุณจะพบว่ามีประโยชน์นี้

คุณสามารถใช้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/

เพียงใส่สไตล์ในไฟล์ CSS ของคุณ

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>

ฉันรู้ว่าผู้คนไม่ชอบโต๊ะบางครั้ง แต่ฉันต้องบอกคุณฉันลองแฮ็กแบบอินไลน์ css และพวกเขาก็ทำงานใน divs บางส่วน แต่คนอื่นไม่ได้ดังนั้นมันง่ายกว่าที่จะใส่ div ที่ขยายใน ตาราง ... และ ... สามารถมีคุณสมบัติแบบอินไลน์หรือไม่และยังเป็นตารางที่จะเก็บความกว้างทั้งหมดของเนื้อหา =)

ตัวอย่างการทำงานอยู่ที่นี่ -

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

โซลูชัน flexbox CSS3 ของฉันมีสองรสชาติ: ตัวที่อยู่ด้านบนมีลักษณะเหมือนช่วงและตัวที่ด้านล่างจะทำงานเหมือนตัวหารโดยใช้ความกว้างทั้งหมดด้วยความช่วยเหลือของเสื้อคลุม คลาสของพวกเขาคือ "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.

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

สิ่งนี้จะทำให้ความกว้าง div หลักเหมือนกับความกว้างองค์ประกอบที่ใหญ่ที่สุด

ลอง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>

การเข้าไปยุ่งเกี่ยวกับ Firebug ฉันพบมูลค่าทรัพย์สิน-moz-fit-contentซึ่งทำตามที่ OP ต้องการและสามารถใช้ดังนี้

width: -moz-fit-content;

แม้ว่ามันจะใช้งานได้เฉพาะบน Firefox แต่ฉันไม่พบสิ่งที่เทียบเท่าเบราว์เซอร์อื่น ๆ เช่น Chrome

คุณสามารถลองรหัสนี้ ติดตามรหัสในส่วน 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>

ฉันได้รับการแก้ไขปัญหาที่คล้ายกัน (ที่ผมไม่ได้ต้องการที่จะใช้display: inline-blockเนื่องจากรายการเป็นศูนย์กลาง) โดยการเพิ่มspanแท็กภายในdivแท็กและการเคลื่อนย้ายการจัดรูปแบบ CSS จากนอกdivแท็กภายในใหม่spanแท็ก เพียงแค่ทิ้งสิ่งนี้ไว้ในความคิดอื่นหากdisplay: inline blockไม่ใช่คำตอบที่เหมาะสมสำหรับคุณ

เราสามารถใช้วิธีใดก็ได้จากสองวิธีในdivองค์ประกอบ:

display: table;

หรือ,

display: inline-block; 

ฉันชอบที่จะใช้display: table;เพราะมันจัดการพื้นที่พิเศษทั้งหมดด้วยตัวเอง ในขณะที่display: inline-blockต้องการแก้ไขพื้นที่เพิ่มเติม

div{
  width:auto;
  height:auto;
}

หากคุณมีตู้คอนเทนเนอร์ที่ใช้งานไม่ได้หลายชั่วโมงหลังจากมองหาโซลูชัน 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 ที่นี่

ฉันพยายามdiv.classname{display:table-cell;}แล้วก็ใช้งานได้!