Есть ли значение CSS для кросс-браузера для "width: -moz-fit-content"?

Мне нужно, чтобы некоторые 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;", но мне нужны эти divs, чтобы вести себя как divs. А именно, каждый следующий div должен быть под, а не встроенным, предыдущим.

Знаете ли вы какое-либо возможное кросс-браузерное решение?

Ответы

Ответ 1

Наконец, я исправил его, используя:

display: table;

Ответ 2

Mozilla MDN предлагает что-то вроде [источник]:

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

Ответ 3

Есть ли одно объявление, которое исправляет это для 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

Ответ 4

В том же случае я использовал: white-space: nowrap;

Ответ 5

Я использую следующие:

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

Ответ 6

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

Ответ 7

Ниже один работал для меня в Chrome и Firefox

div {
  max-width: max-content;
}

Ответ 8

Почему бы не использовать некоторые br s?

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