SORU
8 ŞUBAT 2009, Pazar


Nasıl bir yüzer DİV başka bir kayan DİV yüksekliğini maç için zorlayabilir miyim?

Benim HTML kodu sadece iki sütun, 65%,35% sayfaları sırasıyla böldü.

<div style="float : left; width :65%; height:auto;background-color:#FDD017;">
   <div id="response">
   </div> 
</div>
<div style="float : left; width :35%;height:auto; background-color:#FDD017;">
   <div id="note">
   </div>
</div>

response divbu değişken veri var; note divbu sabit bir veri var. diviki s veri için iki farklı olmasına rağmen, onları arka plan renklerini de içeren bir kutu doldurmak için görünür, böylece aynı boyda görüntülemek istiyorum. Doğal olarak, sorunu yüksekliği verileri şu anda içinde görüntülenen miktarına bağlı olarak değişirresponse div.

Nasıl iki sütun yüksekliği her zaman eşit olduğundan emin olabilir miyim?

CEVAP
8 ŞUBAT 2009, Pazar


Arka plan rengi uygulanmış içeren bir div sarın ve sonra temizlemek bir div var 'sütun'.

<div style="background-color: yellow;">
  <div style="float: left;width: 65%;">column a</div>
  <div style="float: right;width: 35%;">column b</div>
  <div style="clear: both;"></div>
</div>

Güncellenen bazı yorumlar ve kendi düşüncelerimi adresi için:

Bu yöntem çalışır çünkü onun aslında bir basitleştirme senin sorunun, bu biraz 'oldskool' yöntem koydum iki sütun ve ardından boş bir takas unsuru, iş temizleme elemanı olduğunu söyle ana (arka) burada kayan davranışlar biter, bu sağlar üst esasen işlemek 0 piksel yükseklikte pozisyon açık, olacak ne olursa olsun en yüksek öncelikli kayan eleman.

Bunun nedeni ana unsuru en uzun sütun gibi uzun boylu olduğundan emin olmak için, arka üst iki sütun aynı yüksekliğe sahip bir görünüm vermek için ayarlayın.

Bu teknik 'oldskool' çünkü daha iyi bir seçim sadece taşma alarak clearfix gibi bir şey ya bu yükseklik hesaplama davranışları tetiklemek için: ana öğe. saklı olduğu unutulmamalıdır

Buna rağmen bu işleri bu sınırlı senaryosu, eğer istediğiniz her sütun için bak görsel olarak farklı, ya da arasında bir boşluk onları, sonra da ayarı bir arka plan üzerinde üst öğe işe yaramaz, ancak bir numara almak için bu etki.

Hile için ekleyin alt doldurma için tüm sütunlar için maksimum miktarda boyutunu beklediğiniz olabilir fark arasındaki en kısa ve en uzun sütun, yapamazsan bu işi o zaman yerden büyük bir rakam, eğer ihtiyacınız eklemek için negatif alt kenar aynı numara.

İhtiyacınız olacak taşma gizli üst nesne, ama sonuç olacak her sütun isteği işlemek için bu ek yükseklik önerilen tarafından marjı, ama aslında talep planlama boyutu (çünkü negatif marj sayaçları hesaplama).

Bu işleme üst boyutu en uzun sütun, buna rağmen izin tüm sütunları oluşturmak için kendi yükseklik boyutu alt doldurma kullanılır, eğer bu yükseklik daha üst sonra gerisi kolayca klip kapalı.

<div style="overflow: hidden;">
  <div style="background: blue;float: left;width: 65%;padding-bottom: 500px;margin-bottom: -500px;">column a<br />column a</div>
  <div style="background: red;float: right;width: 35%;padding-bottom: 500px;margin-bottom: -500px;">column b</div>
</div>

bowers and wilkins website (dört yatay spot görüntüleri sayfanın en altına bakınız) bu tekniği bir örnek görebilirsiniz.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Matt Steffanina

    Matt Steffan

    1 EYLÜL 2011
  • tsweeney79

    tsweeney79

    21 Ocak 2008
  • tychoadragmire

    tychoadragmi

    20 Mart 2006