Float

Kullanırken Div daraltılır Aşağıdaki HTML'ye sahibim ve düğmelerin ve metnin arkasında mavi bir arka plan görüntülemek istiyorum. Maalesef, aşağıdaki kodla mavi arka plan kayboluyor. Kimlikler ve metinler için CSS'yi kaldırırsam arka plan geri döner.Float

Neyi yanlış yapıyorum?

Teşekkürler!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <style> 


    #actions 
    { 
     background: blue; 
    } 

    #buttons 
    { 
     float: left; 
    } 

    #text 
    { 
     float: right; 
    } 

    </style> 
</head> 
<body> 

     <div id="actions"> 
      <div id="buttons"> 
       <input type="button" id="btnOne" value="Bla bla" /> 
       <input type="button" id="btnTwo" value="Bla bla bls" /> 
      </div> 
      <div id="text">Bla bla bla</div> 
     </div> 

</body> 
</html>

kaynak

2009-03-12 Martin

@Oriol - Bu soru 12 2009. diğer soru 14 Ocak 2010. 14 Ocak tarihinde açıldı soru üzerine açıldı Mart'ta açıldı 2010 yinelenen değil, bu bir olmalıdır. – Martin

Bu soruyu kapalı ve diğer daha "popüler" (çok daha oy, ziyaretler ve favoriler) çünkü diğer değil. Yinelenen olarak kapanan bir soruya sahip olmanın yanlış bir yanı yoktur. – Oriol

Şamandıralarınızı "temizlemek" zorundasınız. Yüzen elemanlar, onları sayfanın normal blok konumlandırmasından çıkarır, böylece yüzer bir öğe, ana kapsayıcıdan ayrılarak, div'i daraltır. Onları temizleyebilirsiniz veya daha fazla özlü ve akıllı yolu eklemektir yana

#actions 
{ 
    background: blue; overflow: auto; 
} 

#buttons 
{ 
    float: left; 
    overflow: hidden; 
} 

#text 
{ 
    float: right; 
    overflow: hidden; 
}

: üst kabına göre 'taşma otomatik': belirli durumlarda kaydırma çubukları üretebilir "taşma auto", genellikle açıkça bunu önlemek Çocuk elemanlarında 'overflow: hidden' belirterek. Bu deneyimlerimde güvenilir bir şekilde çalışıyor. şamandıralar ve bunları temizleme

kaynak

2009-03-12 18:42:14 guns

Vay! İşe yarıyor! Teşekkürler! : D – Martin

bu deneyin:

<div id="actions"> 
     <div id="buttons"> 
      <input type="button" id="btnOne" value="Bla bla" /> 
      <input type="button" id="btnTwo" value="Bla bla bls" />     
     </div> 
     <div id="text">Bla bla bla</div> 
     <div style="clear:both;height:1px;overflow:none;"></div> 
    </div>

temel problem yüzen elemanları kabın hesaplanan yüksekliğe katkıda kalmamasıdır. Böylece div # eylemleri, diğer iki div yüzdüğünde herhangi bir yüksekliğe sahip değildir.

kaynak

2009-03-12 18:40:20 Joel

IE ve FF'de çalışmıyor. – Martin

Üzgünüm. Yanlış yerde div vardı. – Joel

fazla bilgi: sadece süzülüyor unsurları içeriyorsa http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/

kaynak

2009-03-12 19:04:55 AaronSieb

olmayan süzülüyor eleman her yüksekliğe sahip olmayacaktır. En dıştaki elemanın yüzdürme elemanlarını germek ve sarmak için zorlamak için aynı zamanda yüzdürülmelidir. Bu sorunun basit cevabı, 'eylemler' div'unu da yüzdürmek- Bu arka planı beklendiği gibi genişletecektir. Sadece süzülüyor unsurları temizlemek için altta fazladan eleman ekleme

gereksiz ve semantik değildir bu yüzden önüne geçilmesi gerekmektedir.

kaynak

2009-03-27 05:43:13

cevap

İlgili konular