Soru CSS'de satır içi blokların yüksekliğini ayarlayabilir miyim?


CSS'de satır içi blokların yüksekliğini ayarlayabilir miyim?

Kenar boşluklarını 0'a ve yüksekliğe otomatik olarak ayarlayarak, bloğun kullanılabilir alana sığacak şekilde genişleyeceğini düşündüm, ancak hala blok etrafında sıkıca sarılıyor.

.myclass {
    display: inline-block;
    margin: 0em;
    padding: 1em;
    height: auto;
    border: solid;
}

http://jsfiddle.net/6NQDw/

Her iki kutunun da aynı yükseklikte olmasını isterim, ancak pikseller arasında bir genişlik / yükseklik belirtmemek kaydıyla, içeriğiyle belirlenecek div genişliği / yükseklikleri olmasını istiyorum.

Bir çeşit dolgu / kenar boşluğu / hizalama CSS'si veya kullanabileceğim bir şey var mı?


18
2018-06-23 23:03


Menşei


Ne dersin vertical-align:top? - mondi


Cevaplar:


Kullanabilirsin display:table-cell; Saf bir CSS çözümüne ihtiyacınız varsa, ancak IE7'de çalışmayacağını unutmayın (IE6'nın artık tamamen unutulduğunu tahmin ediyorum).

.myclass {
    display: table-cell;
    margin: 0em;
    padding: 1em;
    height: auto;
    border: solid;
}

Ekran için çapraz tarayıcı desteği: tablo hücresi

İhtiyacınız olanı elde etmenin en iyi yolu JavaScript'tir, ancak dinamik içeriğe sahip kapsayıcıların genişliğini açıkça belirleme sorunu çözmek için hemen hemen her zaman doğru yol değildir.


25
2018-06-23 23:13



inline-block IE7'de blok elemanlar için işe yaramıyor, bu yüzden IE7 desteğinin gerekli olmadığını tahmin ediyorum. - BoltClock♦
Eminim sadece seçenekler sunarım. - brezanac
tablo hücresi cazip (bir tablo dışında kullanmak için tamam mı?), ama .myclass blokları arasındaki boşluğu korumak için bir yolu var mı? Tablo hücresine geçtiğimde, boşluk bırakıldı ve kenar boşlukları eklemek, kenar çizgileri arasında boşluk bırakmıyor gibi görünüyor. jsfiddle.net/6NQDw/18 - Steve Hwan
@BoltClock inline-block çalışmıyor, ancak aynı etkiyi yaratabilirsiniz. inline eleman hasLayout. Yıldız hack çalışacak: zoom:1; *display:inline aynı şeyi IE6 / 7'de yapacak inline-block hassas tarayıcılarda. - robertc
@SteveHwan kullanım border-spacing ile display: table-cell. - robertc


Sadece ekle vertical-align:top;

Örnek:

.myclass {
    display: inline-block;
    margin: 0em;
    padding: 1em;
    height: auto;
    border: solid;
    vertical-align:top;
}
<div>
    <div class="myclass">
        line 1<br />
        line 2<br />
        line 3<br />
    </div>

    <div class="myclass">
        line 1<br />
        line 2<br />
        line 3<br />
        line 4<br />
        line 5<br />
        line 6<br />
    </div>
</div>


1
2018-03-18 10:36





Kullanabilirsiniz display: table-cell; Kutuların birbirinin yüksekliğine uymasını sağlamak.


0
2018-06-23 23:14



Satır başına öğe sayısının değişmesine nasıl izin verebilirim? - Costa


IE7 için destek istiyorsanız, satır içi veya tablo hücresi kullanamazsınız.

Sadece float kullan: güvende olmak için ...

aksi halde sadece IE7 için ayrı bir css kullanarak inecek.


0
2018-06-23 23:44



Şamandıranın da eşit yüksekliklere ulaştığını sanmıyorum. jsfiddle.net/6NQDw/17 - Steve Hwan
İki kutu içinde ne beklemeniz gerektiğini biliyorsanız, "yükseklik" i "myclass" a ekleyebilirsiniz. Ancak, kutuların içindeki içeriğin değişebileceğini düşünüyorsanız, IE7'de düzeltmeniz gereken bir sorun olacaktır. - Geocrafter


Lte ie8 için bir stil sayfası eklemek kolaydır, özelliklerini gösterilecek şekilde sıfırlayın: blok, yüzdürme: sol ve toplam genişliği% 100 yerine% 99'dan çıkarın. Bu size gerekli tüm işlevselliği geri verecektir.


-1
2017-10-28 17:43



SO üzerinde kod paylaşırız, cevabınızı düzenleyebilir, böylece orijinal posterler sorusuna göre düzenlenir mi? - Anthony