"Width: -moz-fit-content;" için bir tarayıcılar arası css değeri var mı?


86

Bazı div'lerin merkeze yerleştirilmesi ve aynı zamanda içerik genişliklerine sığması gerekiyor .

Şimdi bunu şöyle yapıyorum:

.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;
  }
}

Şimdi, son komut olan "width: -moz-fit-content;" olduğu tam olarak neye ihtiyacım!

Tek sorun .. sadece Firefox'ta çalışıyor.

"Display: inline-block;" ile de denedim . , ancak bu div'lerin div'ler gibi davranmasına ihtiyacım var. Yani, her bir sonraki div, öncekinin altında olmalı ve satır içi olmamalıdır .

Olası bir çapraz tarayıcı çözümü biliyor musunuz?


1
Şu yanıtlardan birini deneyin: stackoverflow.com/questions/5803030/…
Matt H

4
Chome fit-contentartık destekliyor .
LinuxDisciple

Artık her Tarayıcı (IE hariç) destekliyor fit-content. Firefox dışındaki her tarayıcıda önek olmadan çalışır, Firefox'un hala ihtiyacı var -moz-fit-content. Bkz developer.mozilla.org/en-US/docs/Web/CSS/...
biolauri

Yanıtlar:


168

Sonunda basitçe şunu kullanarak düzelttim:

display: table;

4
Sorunuzun tam olarak aynı terimlerini arıyordum. Yaptım display: tableve ortalamak margin: autoiçin a form. Harika! : D
Leniel Maccaferri

Bununla birlikte, beyaz boşluk kullanmak zorundaydım: pre! Önemli;
Bimal Das

2
Bazı niteliklere saygı duymaz, örn max-width: 100%.
Daniel

Artık her Tarayıcı (IE hariç) destekliyor fit-content. Firefox dışındaki her tarayıcıda önek olmadan çalışır, Firefox'un hala ihtiyacı var -moz-fit-content. Bkz developer.mozilla.org/en-US/docs/Web/CSS/...
biolauri

72

Mozilla'nın MDN'si şuna benzer bir şey öneriyor [ kaynak ]:

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

p şekillendirme için yaptığınızdan iki kez genişlik proerty'si belirleyebilir miyiz? benzer genişlik: içsel; / * Safari / WebKit standart olmayan bir ad / genişlik kullanıyor: -moz-max-content; / Firefox / Gecko * /
Sagar Bhosale

1
-moz-max-contentyalnızca -moz-fit-contentana öğe daha geniş iken eşdeğerdir . -moz-fit-contentiçeriği sığdırır ve metni sarar, ancak -moz-max-contentana öğenin dışına taşar. Aynısı Chrome -webkit-max-contentve için de geçerlidir fit-content.
LinuxDisciple

Eklemeyi unutma width: max-content;.
Tobias Tengler


8

Bunu Webkit, Gecko ve Blink için düzelten tek bir bildirim var mı? Hayır. Ancak, her bir düzen motorunun kuralına karşılık gelen birden çok genişlik özelliği değeri belirleyen bir çapraz tarayıcı çözümü vardır.

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

Dan uyarlanmıştır MDN'yi


2

Bunları kullanıyorum:

.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

Neden bazı brs kullanmıyorsun ?

<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;
}

Misal: http://jsfiddle.net/YZV25/


2
Çok teşekkür ederim, işe yarıyor, ancak div'ler arasındaki üst ve alt kenar boşluğunu işlemek çok zor. Bunun display: table;yerine basitçe kullanarak daha iyi bir çözüm buldum display: inline-block;.
Darme
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.