feragat
Kayan öğelerin yanındaki listeler sorunlara neden olur. Kanımca, bu tür yüzen sorunları önlemenin en iyi yolu, içerikle kesişen hareketli görüntülerden kaçınmaktır. Duyarlı tasarımı desteklemeniz gerektiğinde de yardımcı olacaktır.
Paragraflar arasında ortalanmış görüntülere sahip basit bir tasarım, çok çekici görünecek ve desteklenmesi çok süslü olmaya çalışmaktan çok daha kolay olacaktır. Ayrıca a <figure>.
Ama gerçekten yüzen görüntüler istiyorum!
Tamam, sen eğer öyleyse deli bu yolda devam etmek ısrarlı yeterince kullanılabilir bir çift teknikler vardır.
En basit olanı listeyi kullanmaktır overflow: hiddenya overflow: scrollda liste esasen dolguyu küçültmek içindir, bu da dolguyu yararlı olduğu yere geri çeker:
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
Bu tekniğin birkaç problemi var. Liste uzarsa, görüntünün etrafını sarmaz, floatbu da görüntüyü kullanma amacını neredeyse tamamen yener .
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
Ama gerçekten liste kaydırma istiyorum!
Ok, ödeştik öyleyse çılgın daha kalıcı ve kesinlikle gerekir bu yolu devam, liste öğeleri sarmak ve mermi korumak için kullanılabilecek başka bir tekniktir var.
<ul>(Ve asla yapmak istemiyor gibi görünüyor) mermilerle güzel davranmaya çalışmak yerine, bu mermileri alıp götürün <ul>ve <li>s'ye verin. Mermiler tehlikelidir ve <ul>sadece onları düzgün bir şekilde kullanacak kadar sorumlu değildir.
img {
float: left;
}
.wrapping-list {
padding: 0;
list-style-position: inside;
}
.wrapping-list li {
overflow: hidden;
padding-left: 25px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
Bu kaydırma davranışı karmaşık içeriğe garip şeyler yapabilir, bu yüzden varsayılan olarak eklemenizi önermiyorum. Geçersiz kılınması gereken bir şey yerine seçilebilecek bir şey olarak ayarlamak çok daha kolaydır.
