Есть ли значение кросс-браузера css для " width:-moz-fit-content;"?
Мне нужно несколько divs, чтобы быть центр, расположенный и установите их ширину содержимого в то же время.
теперь я делаю это так:
.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;
}
}
теперь последняя команда "ширина: - moz-fit-содержание;" is ровно что мне нужно!
только проблема.. он работает только на Firefox.
Я также попытался с помощью "дисплей:встроенный блок;", но мне нужно, чтобы эти дивы вели себя как дивы. А именно, каждый следующий div должен быть под, а не inline предыдущий.
знаете ли вы какое-либо возможное кросс-браузерное решение?
6 ответов
MDN Mozilla предлагает что-то вроде следующего [источник]:
p {
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
есть ли одно объявление, которое исправляет это для Webkit, Gecko и Blink? Нет. Однако существует кросс-браузерное решение, указывающее несколько значений свойств width, соответствующих соглашению каждого механизма компоновки.
.mydiv {
...
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
...
}
источник: MDN
почему бы не использовать 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/
Я использую эти:
.right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}