Làm thế nào tôi có thể làm cho một div không lớn hơn nội dung của nó?

Tôi có một bố cục tương tự như:

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

Tôi muốn cho divchỉ mở rộng đến rộng như tôi tabletrở thành.

Giải pháp là để thiết lập của bạn divđể display: inline-block.

Bạn muốn một phần tử khối có những gì CSS gọi là chiều rộng co lại vừa vặn và thông số kỹ thuật không cung cấp một cách may mắn để có được một thứ như vậy. Trong CSS2, thu nhỏ để phù hợp không phải là một mục tiêu, nhưng có nghĩa là để đối phó với một tình huống trong đó trình duyệt "phải" có được một chiều rộng ra khỏi không khí mỏng. Những tình huống đó là:

• Phao nổi
• yếu tố định vị tuyệt đối
• yếu tố khối nội tuyến
• yếu tố bảng

khi không có chiều rộng quy định. Tôi nghe nói họ nghĩ đến việc thêm những gì bạn muốn vào CSS3. Để bây giờ, hãy làm với một trong những điều trên.

Quyết định không để lộ trực tiếp tính năng này có vẻ lạ, nhưng có một lý do chính đáng. Nó đắt. Shrink-to-fit có nghĩa là định dạng ít nhất hai lần: bạn không thể bắt đầu định dạng một phần tử cho đến khi bạn biết chiều rộng của nó và bạn không thể tính chiều rộng sẽ đi qua toàn bộ nội dung. Thêm vào đó, người ta không cần yếu tố thu nhỏ để phù hợp thường xuyên như người ta có thể nghĩ. Tại sao bạn cần thêm div xung quanh bàn của bạn? Có lẽ chú thích bảng là tất cả những gì bạn cần.

Tôi nghĩ rằng sử dụng

display: inline-block;

sẽ hoạt động, tuy nhiên tôi không chắc về khả năng tương thích của trình duyệt.

Một giải pháp khác là bọc bạn divtrong một cái khác div(nếu bạn muốn duy trì hành vi chặn):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

display: inline-block thêm một lề cho yếu tố của bạn.

Tôi muốn giới thiệu điều này:

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

Phần thưởng: Bây giờ bạn cũng có thể dễ dàng trung tâm mà mới lạ mắt #elementchỉ bằng cách thêm margin: 0 auto.

Bạn có thể thử fit-content(CSS3):

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

• Hỗ trợ trình duyệt
• Sự chỉ rõ

Những gì làm việc cho tôi là:

display: table;

trong div. (Đã thử nghiệm trên Firefox và Google Chrome ).

Có hai giải pháp tốt hơn

1. display: inline-block;

   HOẶC LÀ

2. display: table;

Trong số hai display:table;là tốt hơn, bởi vì display: inline-block;thêm một lề.

Đối với display:inline-block;bạn có thể sử dụng phương pháp lề âm để sửa không gian thừa

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

Foo Hack - Hỗ trợ trình duyệt chéo cho Kiểu dáng khối nội tuyến (2007-11-19) .

Không biết trong những ngữ cảnh này sẽ xuất hiện, nhưng tôi tin rằng thuộc tính CSS kiểu floathoặc lefthoặc rightsẽ có hiệu ứng này. Mặt khác, nó cũng sẽ có các tác dụng phụ khác, chẳng hạn như cho phép văn bản nổi xung quanh nó.

Vui lòng sửa lại cho tôi nếu tôi sai, tôi không chắc chắn 100% và hiện tại tôi không thể tự kiểm tra.

Câu trả lời cho câu hỏi của bạn nằm trong tương lai bạn của tôi ...

cụ thể là "nội tại" đang đến với bản cập nhật CSS3 mới nhất

width: intrinsic;

Thật không may, IE đứng sau nó vì vậy nó chưa hỗ trợ

Thông tin thêm về nó: Mô-đun kích thước bên trong & bên ngoài CSS cấp 3 và tôi có thể sử dụng không? : Kích thước bên trong & bên ngoài .

Bây giờ bạn phải hài lòng với <span>hoặc <div>đặt thành

display: inline-block;

Một giải pháp tương thích CSS2 là sử dụng:

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

Bạn cũng có thể thả nổi div của mình, điều này sẽ buộc nó càng nhỏ càng tốt, nhưng bạn sẽ cần sử dụng một mã xóa nếu mọi thứ bên trong div của bạn nổi:

.my-div
{
    float: left;
}

width:1px;
white-space: nowrap;

làm việc tốt cho tôi :)

OK, trong nhiều trường hợp, bạn thậm chí không cần phải làm bất cứ điều gì như mặc định div có heightvà widthtự động, nhưng nếu không phải là trường hợp của bạn, áp dụng inline-blockhiển thị sẽ hiệu quả với bạn ... hãy nhìn vào mã tôi tạo cho bạn và nó sẽ làm được những gì bạn đang tìm kiếm:

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>

Điều này đã được đề cập trong các ý kiến ​​và rất khó để tìm thấy một trong những câu trả lời như vậy:

Nếu bạn đang sử dụng display: flexvì bất kỳ lý do gì, thay vào đó bạn có thể sử dụng:

div {
    display: inline-flex;
}

Điều này cũng được hỗ trợ rộng rãi trên các trình duyệt.

Bạn có thể làm điều đó đơn giản bằng cách sử dụng display: inline;(hoặc white-space: nowrap;).

Tôi hy vọng bạn thấy nó hữu dụng.

Bạn có thể sử dụng inline-blocknhư @ user473598, nhưng hãy cẩn thận với các trình duyệt cũ hơ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 hoàn toàn không hỗ trợ chặn nội tuyến, nhưng họ có -moz-inline-stackcùng một nhóm

Một số trình duyệt chéo xung quanh inline-blockthuộc tính hiển thị: https://css-tricks.com/snippets/css/cross-browser-inline-block/

Bạn có thể xem một số thử nghiệm với thuộc tính này trong: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Chỉ cần đặt một kiểu vào tệp CSS của bạn

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>

Tôi biết đôi khi mọi người không thích bàn, nhưng tôi phải nói với bạn rằng, tôi đã thử các bản hack nội tuyến css và họ đã làm việc trong một số div nhưng trong những người khác thì không, vì vậy, thực sự dễ dàng hơn để đưa div mở rộng vào một bảng ... và ... nó có thể có hoặc không có thuộc tính nội tuyến và bảng vẫn là bảng sẽ giữ tổng chiều rộng của nội dung. =)

Một bản demo hoạt động ở đây-

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

Giải pháp flexbox CSS3 của tôi theo hai hương vị: Một ở phía trên hoạt động giống như một nhịp và một ở phía dưới hoạt động như một div, lấy hết chiều rộng với sự trợ giúp của trình bao bọc. Các lớp của họ lần lượt là "top", "bottom" và "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>

Điều này sẽ làm cho chiều rộng div cha giống như chiều rộng phần tử lớn nhất.

Hãy thử display: inline-block;. Để nó tương thích với trình duyệt, vui lòng sử dụng mã css bên dưới.

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>

Giả mạo xung quanh với Fireorms Tôi đã tìm thấy giá trị -moz-fit-contentthuộc tính chính xác làm những gì OP muốn và có thể được sử dụng như sau:

width: -moz-fit-content;

Mặc dù nó chỉ hoạt động trên Firefox, tôi không thể tìm thấy bất kỳ tương đương cho các trình duyệt khác như Chrome.

Bạn có thể thử mã này. Thực hiện theo mã trong phần 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>

Tôi đã giải quyết một vấn đề tương tự (nơi tôi không muốn sử dụng display: inline-blockvì mục này được căn giữa) bằng cách thêm một spanthẻ bên trong divthẻ và di chuyển định dạng CSS từ divthẻ bên ngoài sang spanthẻ bên trong mới . Chỉ cần ném nó ra khỏi đó như một ý tưởng khác nếu display: inline blockkhông phải là một câu trả lời phù hợp cho bạn.

Chúng ta có thể sử dụng bất kỳ một trong hai cách trên divphần tử:

display: table;

hoặc là,

display: inline-block; 

Tôi thích sử dụng display: table;, bởi vì nó xử lý, tất cả các không gian bổ sung trên chính nó. Trong khi display: inline-blockcần một số không gian sửa chữa thêm.

div{
  width:auto;
  height:auto;
}

Nếu bạn có các dòng ngắt, sau nhiều giờ tìm kiếm một giải pháp CSS tốt và không tìm thấy, bây giờ tôi sử dụng 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>

Đã sửa đổi (hoạt động nếu bạn có nhiều con): Bạn có thể sử dụng jQuery (Xem liên kết JSFiddle)

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


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

Đừng quên bao gồm jQuery ...

Xem JSfiddle tại đây

Tôi đã thử div.classname{display:table-cell;}và nó đã làm việc!