Konteyner (dıv veya span)önlemek Sarma

SORU

25 Mart 2009, ÇARŞAMBA

Konteyner (dıv veya span)önlemek Sarma

Bir kabın içine sabit genişlik div öğeleri bir grup koyun ve yatay kaydırma çubuğunu görünür yapmak istiyorum. Div/span elemanları, HTML içinde göründükleri sırada soldan sağa doğru görünür. (aslında) açtı

Bu şekilde yatay kaydırma çubuğu görünür ve içeriği ile (soldan sağa) okuma için dikey kaydırma çubuğunu yerine kullanılabilir.

Bir kap içinde onları yüzer ve sonra bir "white-space:" konteyner tarzı, ama ne yazık ki, hala wrap gibi görünüyor. kısmını kaplayacak koyarak denedim Fikirler?

Bu gibi görünüyordu:

.slideContainer {
    white-space: nowrap;
}
.slide { 
    width: 800px;
    float: left;
    display: inline;
}

<div class="slideContainer">
    <div class="slide">Some content</div>
    <div class="slide">More content</div>
    <div class="slide">Even More content!</div>
</div>

Güncelleme: ama başka bir yol olduğu konusunda yanıldıklarını makale yaşında gerçi eminim. örnekleri site Bakın

CEVAP

25 Mart 2009, ÇARŞAMBA

Bunu deneyin:

.slideContainer {
    overflow-x: scroll;
    white-space: nowrap;
}
.slide {
    display: inline-block;
    width: 600px;
    white-space: normal;
}

<div class="slideContainer">
    <span class="slide">Some content</span>
    <span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
    <span class="slide">Even more content!</span>
</div>

.slideContainer { overflow-x: scroll; } atlayabilirsiniz bunu okuduğunda 15**) ve bu ambalaj üzerinde pencere yerine bir kaydırma çubuğu alacaksın unutmayın.

Burada anahtar display: inline-block. Bu decent cross-browser support günümüzde vardır, ama her zamanki gibi, tüm hedef tarayıcılarda emin olmak için test etmeye değer.

Bunu Paylaş: