Kaydırma yüzer divs dur

SORU

11 NİSAN 2011, PAZARTESİ

Kaydırma yüzer divs dur

Eğer tarayıcı onları sığamayacak kadar dar ise yapışmayan divs bir satır yapmak istiyorum (hücre).

Yığın aradım ve basit bir css sorusu olması gerektiğini düşündüğüm için çalışan bir cevap bulamadım.

Hücrelerin genişliği belirtmiş. Satır genişliğini belirtmek istemiyorum ancak, genişliğini otomatik olarak alt hücre genişliği olmalıdır.

Eğer görüş satırları kalmam için çok dar ise, div ile kaydırma çubukları taşması gerekir.

Lütfen çalışan kod parçacığı olarak cevap vermek, başka bir yerde gördüğüm çözümleri (genişliğini gibi: çalışmak gibi görünmüyorlar 100%) bir sürü denedim.

Html/css sadece bir çözüm, hiçbir javascript arıyorum.

<html>
<body>
<style>

.row {
    float:left;
    border: 1px solid yellow;
   width: 100%;
   overflow: auto;
}

.cell {
    float: left;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
</div>


</body>
</html>

Şu anda gerçekten çok büyük bir rakam satır genişliği hardcoding ediyorum.

CEVAP

13 HAZİRAN 2012, ÇARŞAMBA

CSS özelliği display: inline-block Bu gereksinimi karşılamak için tasarlanmıştır. Bu konuda biraz buradan okuyabilirsiniz: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Aşağıda kullanımına bir örnek. Anahtar element row eleman white-space: nowrap o cell unsurları display: inline-block var. Bu örnek, en büyük tarayıcılar üzerinde çalışması gerekir; uyumluluk tablosu için: http://caniuse.com/#feat=inline-block

<html>
<body>
<style>

.row {
    float:left;
    border: 1px solid yellow;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
</div>


</body>
</html>

Bunu Paylaş: