Питання Як зробити div не більшим, ніж його вміст?


У мене макет схожий на:

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

Я хотів би для цього div щоб тільки розширитися до такої широкої, як моя table стає


1693
2018-01-16 16:03


походження


ефект називається "shrinkwrapping", і, як відповісти, існує кілька способів зробити це (плаваюча, вбудована, мінімальна / максимальна ширина), у всіх з яких є побічні ефекти на вибір - annakata


Відповіді:


Рішення - встановити ваш div до display: inline-block.


2040
2017-10-12 16:47



@ leif81 Ви можете використовувати a span або a div або ul або що-небудь інше, важлива частина полягає в тому, що контейнер, який ви хочете мати мінімальну ширину, має властивість CSS display: inline-block - miahelf
якщо хтось дивує: можна орієнтувати батьківську таблицю, встановивши "text-align: center" на батьківському рівні та "text-align: left" на ньому (наприклад, <body style = "text-align: center"> < span style = "text-align: left; display: inline-block;"> <table> ... </ table> </ span> </ body>) - bernstein
Він не працює на хрому для мене з інтервалом, але працює за допомогою білого простору: nowrap; - albanx
Будь ласка, зверніть увагу, що як тільки у вас є display: inline-block властивість встановити margin: 0 auto; не буде працювати, як очікувалося. У цьому випадку, якщо батьківський контейнер має text-align: center; потім inline-block елемент буде горизонтально центрованим. - Savas Vedova
inline-block НЕ працював для мене, але inline-flexЗРОБИВ. - mareoraft


Ви хочете елемент блоку, який має те, що CSS викликає зсуву до ширини, і специфікація не забезпечує благословенний спосіб отримати таку річ. У CSS2, скорочення до розміру не є метою, а означає мати справу з ситуацією, коли браузер "повинен" отримати ширину з невисокого повітря. Такі ситуації:

  • плавати
  • абсолютно позиційний елемент
  • елемент inline-block
  • табличний елемент

коли немає вказаної ширини. Я чув, що вони думають про додавання того, що ви хочете, в CSS3. Наразі виконайте одну з наведених вище дій.

Рішення не піддавати безпосередньо виявлення функції може здатися дивним, але є вагомі причини. Це дорого. Стиснення до розміру означає форматування принаймні двічі: ви не можете розпочати форматування елемента, поки не знаєте його ширину, і ви не можете обчислити ширину, не переходячи через весь вміст. Крім того, не потрібно стискати елементи так часто, як можна подумати. Чому вам потрібна додаткова діві навколо вашого столу? Можливо, заголовок таблиці - все, що вам потрібно.


308
2018-01-16 16:40



я б сказав inline-block точно призначений для цього і ідеально вирішує проблему. - miahelf
Я думаю, що вони додають в CSS4, і це буде content-box, max-content, min-content, available, fit-content, auto - Muhammad Umer
Новий fit-content ключове слово (не існує, коли ця відповідь була вперше написана і все ще не повністю підтримується) дозволяє явно застосовувати "стиснення до розміру" розміру до елемента, видаливши необхідність для будь-якого запропонованого тут хак, якщо вам пощастить, щоб бути націленим лише на веб-переглядачі з підтримкою. +1 тим не менше; вони залишаються корисними зараз! - Mark Amery
float зробив те, що мені потрібно було зробити! - nipunasudha


Я думаю використовувати

display: inline-block;

буде працювати, однак я не впевнений у сумісності браузера.


Іншим рішенням було б обернути вашу div в іншому div (якщо ви хочете зберегти поведінку блоку):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

196
2018-01-16 16:41



Щоб відповісти на питання сумісності браузера: це не буде працювати з IE7 / 8 на елементах DIV. Ви повинні використовувати елементи SPAN. - Matt Brock
@feeela - я завжди поклав * перед зумом, наприклад *display: inline; *zoom: 1;. Я не протестував цю конкретну ситуацію, але в минулому я завжди вважав, що хак для hasLayout потрібен лише для IE7 або IE8 в режимі IE7 (або IE8 у примх!). - robocat
@robocat Так, дійсно є обхідний шлях inline-block увімкнено в IE 7. - feeela
@feela - ваш коментар не має сенсу для мене! Я пропонував вставити * перед зумом, а також І.Е. * масштабування: 1; - robocat
Будь ласка, поясніть, чому ваше рішення вбудованого блоку працює. - HelloWorldNoMore


display: inline-block додає додатковий запас до вашого елемента.

Я б рекомендував це:

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

180
2018-05-12 23:39



+1 - це найкраще і найчистіше рішення для сучасних веб-переглядачів, яке також дозволяє центрувати елемент. Умовний коментар з position: absolute необхідний для <IE8. - uınbɐɥs
Уточнюючи display: inline-block не додає ніяких запасів. Але CSS обробляє пробіл, який буде показано між вбудованими елементами. - feeela
Будь ласка, поясніть, чому ваше рішення дисплея: робота таблиці. - HelloWorldNoMore
Вбудований блок робить елемент неможливим у своєму батькові (наприклад, якщо є вирівняння тексту: у центрі ви не можете прикріпити його ліворуч): таблиця ідеально :) - FlorianB
Це шлях, якщо ви маєте position: absolute - m4heshd


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

Foo Hack - крос-браузер Підтримка стилю вбудованого блоку (2007-11-19).


82
2017-08-25 19:36



Будь-хто, хто має це питання, повинен додати всі ці стилі. Firefox додавав поля, коли не користується -moz-inline-stack - Justin


Що для мене це:

display: table;

в div. (Тестовано на Firefox і Гугл хром)


74
2018-01-11 12:01



Так, особливо, якщо вам потрібно орієнтуватися на межі: авто. Цей варіант inline-block не є рішенням. - Zsolt Szatmari
Також зауважте, що якщо ви бажаєте, щоб робота підкладки знаходилася в цьому елементі, ви повинні встановити border-collapse: separate; стиль Це за замовчуванням у багатьох браузерах, але часто в CSS-схемах, таких як bootstrap, скидання значення до значення collapse. - djxak
Протестовано на MSIE 6 на телефоні Windows Mobile 6.5, створеному в 2009 році: це витончено погіршується до повної ширини диску (що навряд чи буде проблемою на телефоні). Якщо хтось використовує версію Internet Explorer менше 8 на робочому столі, вони використовують непідтримувану операційну систему (IE6 постачається з XP, IE7 постачається з Vista); Я б перенаправляв їх на сторінку, повідомляючи їм про перехід до GNU / Linux, якщо вони хочуть продовжувати безпечне використання Інтернету на цій машині. - Silas S. Brown


Ви можете спробувати fit-content (CSS3):

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

61
2018-05-27 00:41



Який не підтримується в IE caniuse.com/#search=fit-content :( - Bartek Skwira
@BartlomiejSkwira Будь-який замінник працює в IE або Eclipse? інше рішення як inline-block не працює мені .. \ - DAVIDBALAS1
Це робить надто багато сенсу, звичайно ж, його не вистачає. - Sava B.


Існує два кращих рішення

  1. display: inline-block;

    АБО

  2. display: table;

З цих двох display:table; краще. 

Для display:inline-block; ви можете використати метод негативного маржу, щоб виправити додатковий пробіл


53
2018-05-10 20:16



Ви не бажаєте пояснювати чому display:table краще? - Nathaniel Ford
Для відображення: inline-block, вам слід скористатися методом негативного поля для виправлення додаткового інтервалу. - Shuvo Habib
@NathanielFord display:table залишає елемент у контексті форматування Блоку, тому ви можете контролювати свою позицію з полями і т. ін., як завжди. display:-inline-*, з іншого боку, поміщає елемент у контекст Inline, у якому браузер створює навколо нього анонімний блок обгортку, що містить рядок рядка зі успадкованими параметрами шрифту / висоти рядка та вставляє блок у цей рядок (вирівнювання це вертикально за базовою лінією за замовчуванням). Це передбачає більше "магічних" і, отже, потенційних сюрпризів. - Ilya Streltsyn