it-swarm-id.com

Apakah ada nilai browser lintas css untuk "width: -moz-fit-content;"?

Saya perlu beberapa divs menjadi posisi tengah dan untuk sesuai dengan lebar konten mereka pada saat yang sama.

Saya sekarang melakukannya seperti ini:

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

Sekarang, perintah terakhir "width: -moz-fit-content;" adalah tepatnya apa yang saya butuhkan! 

Satu-satunya masalah adalah .. ini hanya berfungsi pada Firefox.

Saya juga mencoba dengan "display: inline-block;", tapi saya perlu div ini untuk berperilaku seperti div. Yaitu, setiap div berikutnya harus di bawah , dan bukan inline , sebelumnya.

Apakah Anda tahu ada kemungkinan solusi lintas-browser?

54
Darme

Akhirnya saya memperbaikinya hanya menggunakan:

display: table;
108
Darme

MDN Mozilla menyarankan sesuatu seperti [ sumber ] berikut:

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

Apakah ada satu deklarasi yang memperbaikinya untuk Webkit, Gecko, dan Blink? Tidak. Namun, ada solusi lintas-peramban dengan menetapkan nilai properti beberapa lebar yang sesuai dengan konvensi setiap mesin tata letak.

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

Diadaptasi dari: MDN

7
b_archer

Dalam kasus serupa saya menggunakan: white-space: nowrap;

4
user570605

Saya menggunakan ini:

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

Mengapa tidak menggunakan beberapa 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;
}

Contoh:http://jsfiddle.net/YZV25/

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