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


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

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

Tôi muốn cho div chỉ mở rộng đến table trở thành.


1693
2018-01-16 16:03


gốc


hiệu ứng được gọi là "shrinkwrapping", và như đã trả lời có một vài cách để làm điều này (float, inline, min / max-width) tất cả đều có tác dụng phụ để lựa chọn - annakata


Các câu trả lời:


Giải pháp là đặt div đến display: inline-block.


2040
2017-10-12 16:47



@ leif81 Bạn có thể sử dụng span hoặc một div hoặc là ul hoặc bất kỳ điều gì khác, phần quan trọng là đối với vùng chứa bạn muốn có chiều rộng tối thiểu có thuộc tính CSS display: inline-block - miahelf
nếu ai đó thắc mắc: người ta có thể đặt chính giữa bố mẹ của bảng bằng cách đặt "text-align: center" trên đó là "parent-align: left" trên nó (ví dụ <body style = "text-align: center"> < span style = "text-align: left; display: inline-block;"> <table> ... </ table> </ span> </ body>) - bernstein
Nó không hoạt động trên chrome cho tôi với span, nhưng hoạt động bằng cách sử dụng không gian trắng: nowrap; - albanx
Xin lưu ý rằng một khi bạn có display: inline-block tài sản thiết lập margin: 0 auto; sẽ không hoạt động như mong đợi. Trong trường hợp đó nếu vùng chứa chính có text-align: center; sau đó inline-block phần tử sẽ được căn giữa theo chiều ngang. - Savas Vedova
inline-block KHÔNG làm việc cho tôi, nhưng inline-flex ĐÃ LÀM. - mareoraft


Bạn muốn có một phần tử khối có CSS ​​gọi là chiều rộng co-to-fit và spec 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 mà 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
  • phần tử được định vị hoàn toàn
  • phần tử khối nội tuyến
  • phần tử bảng

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

Quyết định không hiển thị trực tiếp tính năng có vẻ lạ, nhưng có một lý do chính đáng. Nó đắt. Shrink-to-fit 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 toán chiều rộng w / o đ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ẽ bảng chú thích là tất cả những gì bạn cần.


308
2018-01-16 16:40



tôi sẽ nói inline-block chính xác là dành cho việc này và giải quyết vấn đề một cách hoàn hảo. - miahelf
tôi nghĩ rằng họ đang thêm vào css4 và nó sẽ là content-box, max-content, min-content, available, fit-content, auto - Muhammad Umer
Cái mới fit-content từ khóa (không tồn tại khi câu trả lời này được viết đầu tiên và vẫn không được hỗ trợ đầy đủ) cho phép bạn áp dụng một cách rõ ràng kích thước "thu nhỏ đến vừa" thành một phần tử, loại bỏ sự cần thiết của bất kỳ hack nào được đề xuất ở đây nếu bạn đủ may mắn để chỉ nhắm mục tiêu các trình duyệt có hỗ trợ. 1 dù sao; chúng vẫn hữu ích cho bây giờ! - Mark Amery
float đã làm những gì tôi cần làm! - nipunasudha


Tôi nghĩ 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à quấn div trong một 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;
}

196
2018-01-16 16:41



Để trả lời câu hỏi tương thích với trình duyệt: điều này sẽ không hoạt động với IE7 / 8 trên các phần tử DIV. Bạn phải sử dụng các phần tử SPAN. - Matt Brock
@feeela - Tôi luôn đặt * ở phía trước của hình thu nhỏ, ví dụ: *display: inline; *zoom: 1;. Tôi đã không thử nghiệm cho tình huống cụ thể này, nhưng tôi đã luôn luôn tìm thấy trong quá khứ mà hack hasLayout chỉ cần thiết cho IE7, hoặc IE8 trong chế độ IE7 (hoặc IE8 trong quirks!). - robocat
@robocat Vâng, đó thực sự là một giải pháp để có inline-block được kích hoạt trong IE 7. - feeela
@ feela - nhận xét của bạn không có ý nghĩa với tôi! Tôi đã đề xuất đặt * trước thu phóng cũng như I.e. * zoom: 1; - robocat
Vui lòng giải thích lý do giải pháp nội tuyến của bạn hoạt động. - HelloWorldNoMore


display: inline-block thêm một lề bổ sung cho phần 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 */
}

180
2018-05-12 23:39



+1 - Đây là giải pháp tốt nhất và sạch sẽ nhất cho các trình duyệt hiện đại cũng cho phép phần tử được căn giữa. Nhận xét có điều kiện với position: absolute là cần thiết cho <IE8. - uınbɐɥs
Chỉ định display: inline-block không thêm bất kỳ lề nào. Nhưng CSS xử lý khoảng trắng được hiển thị giữa các phần tử nội tuyến. - feeela
Vui lòng giải thích lý do giải pháp hiển thị của bạn: bảng hoạt động. - HelloWorldNoMore
inline-block làm cho phần tử không thể định vị trong phần tử cha mẹ của nó (ví dụ: nếu có văn bản căn chỉnh: trung tâm bạn không thể làm cho nó gắn vào bên trái) hiển thị: bảng là hoàn hảo :) - FlorianB
Đây là con đường để đi nếu bạn có position: absolute - m4heshd


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


82
2017-08-25 19:36



Bất kỳ ai gặp sự cố này đều phải thêm tất cả các kiểu này. Firefox thêm vào lề khi không sử dụng -moz-inline-stack - Justin


Điều gì làm việc cho tôi là:

display: table;

bên trong div. (Thử nghiệm trên Firefox và Google Chrome).


74
2018-01-11 12:01



Vâng, đặc biệt là nếu bạn cần phải trung tâm với lề: tự động. Trường hợp khối nội tuyến đó không phải là giải pháp. - Zsolt Szatmari
Cũng lưu ý rằng nếu bạn muốn padding làm việc bên trong phần tử này, bạn phải thiết lập border-collapse: separate; Phong cách. Đó là mặc định trong nhiều trình duyệt nhưng thường là khung công tác css như bootstrap đặt lại giá trị cho collapse. - djxak
Thử nghiệm trên MSIE 6 trên một chiếc điện thoại Windows Mobile 6.5 được sản xuất trong năm 2009: nó giảm xuống một cách hoàn toàn với div có độ rộng đầy đủ (điều này có vẻ không phải là vấn đề trên điện thoại). Nếu bất kỳ ai sử dụng phiên bản Internet Explorer dưới 8 trên máy tính để bàn, họ đang sử dụng hệ điều hành không được hỗ trợ (IE6 đi kèm với XP, IE7 đi kèm với Vista); Tôi sẽ chuyển hướng họ đến một trang yêu cầu họ nâng cấp lên GNU / Linux nếu họ muốn tiếp tục sử dụng Internet an toàn trên máy đó. - Silas S. Brown


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

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

61
2018-05-27 00:41



Không được hỗ trợ trong IE caniuse.com/#search=fit-content :( - Bartek Skwira
@BartlomiejSkwira Bất kỳ công việc thay thế nào trong IE hoặc Eclipse? giải pháp khác như inline-block không hoạt động với tôi .. \ - DAVIDBALAS1
Điều này làm cho cảm giác quá nhiều, tất nhiên nó thiếu sự hỗ trợ. - Sava B.