Чи існує значення перехресного браузера css для “width: -moz-fit-content;”?

85

Мені потрібні деякі div, щоб вони були розташовані по центру та одночасно відповідали їх ширині вмісту .

Зараз я роблю це так:

.mydiv-centerer{

  text-align: center;

  .mydiv {
    background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px #0099FF;
    color: white;
    margin: 10px auto;
    padding: 10px;
    text-align: justify;
    width: -moz-fit-content;
  }
}

Тепер остання команда "width: -moz-fit-content;" це саме те , що мені потрібно!

Єдина проблема .. це працює лише у Firefox.

Я також спробував "display: inline-block;" , але мені потрібні ці div, щоб поводитись як div. А саме, кожен наступний div повинен бути під , а не вбудованим , попереднім.

Чи знаєте ви будь-яке можливе крос-браузерне рішення?

firefox css cross-browser

— DuArme
джерело

1

Спробуйте одну з таких відповідей: stackoverflow.com/questions/5803030/…

— Matt H

3

Chome підтримує fit-contentзараз.

— LinuxDisciple

167

Нарешті я це виправив, просто використовуючи:

display: table;

— DuArme
джерело

4

Я потрапив сюди, шукаючи точно ті самі умови вашого запитання. Я зробив display: tableі margin: autoдля центру a form. Чудово! : D

— Леніель Маккаферрі

Поряд із цим мені довелося використовувати пробіли: pre! Important;

— Bimal Das

2

Не поважає деякі атрибути, наприклад max-width: 100%.

— Даніель

71

MDN Mozilla пропонує щось на зразок наступного [ джерело ]:

 p {
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

— Джастін Гіслін
джерело

ми можемо вказати ширину властивості двічі, як це було для стилю p? як ширина: внутрішня; / * Safari / WebKit використовує нестандартне ім'я / ширина: -moz-max-content; / Firefox / Gecko * /

— Сагар Босале

1

-moz-max-contentлише еквівалентно, -moz-fit-contentпоки батьківський елемент ширший. -moz-fit-contentбуде відповідати вмісту та обертати текст, але -moz-max-contentбуде виходити за межі батьківського елемента. Те саме стосується Chrome -webkit-max-contentі fit-content.

— LinuxDisciple

Не забудьте додати width: max-content;.

— Тобіас Тенглер

13

У подібному випадку я використовував: white-space: nowrap;

— користувач570605
джерело

1

Це вирішило мою проблему із переповненням вмісту, що випадає. Дякую!

— Зак Лейтон

7

Чи існує одна декларація, яка це виправляє для Webkit, Gecko та Blink? Ні. Однак існує крос-браузерне рішення, вказуючи значення значень властивостей ширини, які відповідають умовам кожного механізму компонування.

.mydiv {  
  ...
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
  ...
}

Адаптовано з: MDN

— b_archer
джерело

2

Я використовую такі:

.right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}

— діїзм
джерело

2

width: intrinsic;           /* Safari/WebKit uses a non-standard name */
width: -moz-max-content;    /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */

— Ігор Павлик
джерело

-1

Чому б не використовувати деякі brs?

<div class="mydiv-centerer">
    <div class="mydiv">Some content</div><br />
    <div class="mydiv">More content than before</div><br />
    <div class="mydiv">Here is a lot of content that
                       I was not anticipating</div>    
</div>

CSS

.mydiv-centerer{
    text-align: center;
}

.mydiv{
    background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px #0099FF;
    color: white;
    margin: 10px auto;
    padding: 10px;
    text-align: justify;
    display:inline-block;
}

Приклад: http://jsfiddle.net/YZV25/

— Джейсон Дженнаро
джерело

2

Щиро дякую, це працює, але надто важко обробляти верхнє та нижнє поле між div. Я знайшов краще рішення, просто використовуючи display: table;замість display: inline-block;.

— DuArme