Css width attibute kullanılarak div'in piksel genişliği ayarlanamıyor

4 div içeren bir div kurmaya çalışıyorum. Kapsayıcının genişliğini ve içerilen bölümlerin bazılarını değerlerini ayarlamak için ayarlamak istiyorum, ancak içeriğin genişliğini gözüküyorlar.Css width attibute kullanılarak div'in piksel genişliği ayarlanamıyor

<html> 
<head> 
    <style> 
div { 
    border: 1px solid #888; 
} 

.container { 
    width: 300px; 
    position: relative; 
} 

.container div { 
    display: inline; 
    } 

.div1 { 
    width: 20px; 
    overflow: hidden; 
} 
.div2 { 
    width: 80px; 
    overflow: hidden; 
} 
.div3 { 
    width: 160px; 
    overflow: hidden; 
} 
.div4 { 
    width: 20px; 
    overflow: hidden; 
    position: absolute; 
    top:0px; 
    right: 0px; 
} 
    </style> 
</head> 
<body> 

<div class="container"> 
    <div class="div1"><img src="1x1.gif" width="1" height="1"/></div> 
    <div class="div2"><span>date</span></div> 
    <div class="div3"><span>text</span></div> 
    <div class="div4"><span>twistie</span></div>  
</div>  
</body> 
</html>

sonuç şuna benzer: sol div'ler gerekli genişlikler ayarlı olmama neden

+--+----+----+------------------------+---+ 
| |date|text|      |twi| 
+--+----+----+------------------------+---+

Herkes açıklayabilir misiniz? satır içi stil bu deneyin:

kaynak

2010-11-02 paul

Bunlar sütun başlıkları mıydı? Bir tablo daha uygun olabilir gibi görünüyor. – meagar

Sütun başlıkları değil. Bir tabloyu kullanmak istemiyorum * stilleri * önemli ölçüde değişebilir ... – paul

ben çünkü ekranın düşünüyorum

<div style='width:100px;overflow:hidden;'> 
<div style='float:left;width:20px'></div> 
<div style='float:left;width:20px'></div> 
<div style='float:left;width:20px'></div> 
<div style='clear:both;'></div> 
</div>

kaynak

2010-11-02 13:56:11 heximal

+1 Bu hile yapmış gibi görünüyor! Açıklama birisi ;-) – paul

Satır öğeleri, belirttiğiniz herhangi bir genişlik veya yükseklik kullanmaz. –

.container { 
    float: left; 
    width: 300px; 
    position: relative; 
} 

.container div { 
    float: left; 
}

hile yapalım mı. İç boşluklardaki satır içi ekranı çıkarın ve kalan tüm boşlukları süzün. Daha sonra divlerin genişliklerini ve aralarındaki boşlukları belirtebilirsiniz. Eğer satır içi kapsayıcı div ayarlandığında

.container div { 
    display: inline-block; 
    }

şöyle

kaynak

2010-11-02 13:58:10

CSS değiştirme

, aktif tüm çocukların bir yanı satır içi ayarlı, siz de sadece <span> s kullanarak olmuş olabilir.

Görmek için bir örnek. Eğer display:inline; ayarlıyorsunuz çünkü genişlikleri ayarlayamıyor

http://jsfiddle.net/Kyle_Sevenoaks/ZwKDb/

kaynak

2010-11-02 14:00:05 Kyle

nedenidir.

Öğeler satır içi olarak görüntülendiğinde, öğelerin boyutu, içindeki metnin uzunluğuna göre belirlendiğinden boyutlarını belirtemezler.

Varsayılan olarak etiketleri display:block; olarak ayarlanmıştır. Bu modun yüksekliği ve genişliği belirtilebilir, ancak varsayılan değerler önceki bloğun altında görüntülenir. sizin için bu yaklaşık iki yolu vardır

Kullanım display:block; ve float:left; - Bu daha sonraki elementler çevrelerindeki sarın anlamına gelir yüzen elemanları, içine blokları değişecektir. Diğer bloklarla kullanıldığında, bu, onları hizalamanıza olanak tanır. Bununla birlikte, float'un kullanılması, tarif ettiğim sarmalayıcı etki nedeniyle diğer beklenmedik yan etkilere sahip olabilir.
Kullan display:inline-block; - Bu, bu soru için tercih ettiğim çözümdür. inline-block, block ve inline arasında yarım yollu bir ev modudur. Bir öğenin belge akışı amacıyla inline olarak ele alınmasına izin verir, ancak yine de dahili olarak bir blok gibi davranır, çünkü her zaman rectanguar olur ve yükseklik ve genişlik vb. Belirtebilirsiniz. Birkaç tuhaflığı vardır (IE6'daki en kötü destek, ancak genel olarak, elde etmeye çalıştığınız şey için, çok daha temiz bir çözümdür ve float'un garip yan etkilerine sahip değildir.

Yardım eder.

kaynak

2010-11-02 14:23:27 Spudley

Css width attibute kullanılarak div'in piksel genişliği ayarlanamıyor

cevap

İlgili konular