Satır içi satır içi satır

Aşağıdaki örnekte iki span etiketinin yan yana görüntülenmesini bekledim, bunun yerine birbirinin altında görüntüleniyorlar. Eğer sınıfın genişliğini span.right olarak ayarlarsam, bunların% 49'u yan yana görüntülenir. Doğru açıklığın neden% 50'den fazla almasını sağlayan bazı görünmez dolgu/kenar boşluğu olduğu gibi aşağı doğru itildiğini anlayamıyorum. Bunu html tablolarını kullanmadan bitirmeye çalışıyorum. Herhangi bir fikir? açıklama içinSatır içi satır içi satır

<html> 
<head> 
    <title>Test Page</title> 
    <style type='text/css'> 
     * { 
      margin: 0; 
     } 

     html,body{ 
      margin:0; 
      padding:0; 
      height:100%; 
      width:100%; 
      border:none; 
     } 

     div.header{ 
      width:100%; 
      height:80px; 
      vertical-align:top; 
     } 

     span.left { 
      height:80px; 
      width:50%; 
      display:inline-block; 
      background-color:pink; 
     } 

     span.right { 
      vertical-align:top; 
      display:inline-block; 
      text-align:right; 
      height:80px; 
      width:50%; 
      background-color:red; 
     } 
    </style> 
</head> 
<body> 
    <div class='header'> 
     <span class='left'>Left Span 50% width</span> 
     <span class='right'>Right Span 50% width</span> 
    </div> 
</body> 
</html>

teşekkürler. Kayan nokta: sol FF 3.1'de beklenen sonuçlarla güzelce çalışır. Ne yazık ki, IE6'da, sağ taraftaki açıklık% 50'nin% 50'sini oluşturuyor ve bu da tarayıcı penceresinin% 25'ini oluşturuyor. Genişliğinin% 100'e ayarlanması istenilen sonuçlara ulaşıyor ancak standart uyumluluk modunda olan FF 3.1'de kırılıyor ve bunu anlıyorum. Bunu alınıyor o O kadar yüzer neden olacaktır

span.left için hacks veya ekleme olmuştur

kaynak

2008-08-29 rams

Neden IE6'yı destekliyorsunuz? http://www.ie6nomore.com/ – jrummell

float: left;

deneyin bir meydan okuma birden CSS sayfalarını kullanmadan FF ve IE 6, hem çalışmak sola (sözdizimi tarafından önerildiği gibi).

Ben hiçbir şekilde bir CSS uzmanı değilim bu yüzden bu kadar unarguable gerçeği yapmayız lütfen ama bir şey süzülüyor zaman, bunun altındaki şeylerin dikey pozisyona hiç farketmez bulmak.

Eğer span.right'ı sağa doğru süzüyorsanız, o zaman aşağıya metin eklerseniz, enteresan sonuçlar elde edersiniz, bu "enteresan: sol/sağ/her ikisi" yi kullanabileceğiniz "ilginç sonuçlar" ı durdurmak için bloğa neden olur. sol/sağa/her ikisine birden süzülen herhangi bir şeyin altında olacağı net tasarım. W3Schools da bu sayfada bir sayfa var.

Ve Stackoverflow'a hoş geldiniz.

kaynak

2008-08-29 16:14:25 Teifion

Hızlı cevap kayan float için teşekkürler: left 2 açıklık birbirinin yanına getirdi. Ancak, açıklığın neden float olmadan aşağı itildiğini anlamıyorum. Ne itiyor? – rams

Açıklığın yüksekliği benim için neden zorladı ve nedeniniz de iyi olabilirdi. – Johannes

ben bu kesmek sevmiyorum ama hem Firefox ve IE6 içinde iş yapmak gibi görünüyor:

span.right { 
    vertical-align:top; 
    display:inline-block; 
    text-align:right; 
    height:80px; 
    width:50%; 
    *width:100%; 
    background-color:red; 
}

Not IE6 ihtiyacına tatmin görünüyor ve Firefox tarafından göz ardı edilir *width: 100%.

kaynak

2008-08-29 17:50:18 rams

Bunun nedeni, satır içi ve satır içi bloğun, öğeler arasındaki boşluk (sizin durum satırınızda) içermesidir. Sizin durumunuzda, elemanların kombine genişliği% 50 +% 50 + beyaz boşluk>% 100'dür.

Sen (boşluksuz) HTML belgesinde

<div class='header'> 
    <span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span> 
</div>

aynı satırda iki öğeyi koymak Veya kullanması gerekir HTML

<div class='header'> 
     <span class='left'>Left Span 50% width</span><!-- 
    --><span class='right'>Right Span 50% width</span> 
</div>

Kendimi ikinci tercih yorumlar.

kaynak

2013-04-24 11:45:47 eba

cevap

İlgili konular