Penolakan
Daftar di sebelah elemen melayang menyebabkan masalah. Menurut pendapat saya, cara terbaik untuk mencegah masalah mengambang semacam ini adalah dengan menghindari gambar mengambang yang bersinggungan dengan konten. Ini juga akan membantu ketika Anda harus mendukung desain yang responsif.
Desain sederhana yang memusatkan gambar di antara paragraf akan terlihat sangat menarik dan jauh lebih mudah didukung daripada mencoba menjadi terlalu mewah. Ini juga satu langkah dari a <figure>.
Tapi saya benar-benar ingin gambar melayang!
Ok, jadi jika Anda gila cukup gigih untuk terus menyusuri jalan ini, ada beberapa teknik yang dapat digunakan.
Yang paling sederhana adalah dengan menggunakan daftar overflow: hiddenatau overflow: scrollagar daftar itu pada dasarnya dibungkus dengan pembungkus yang menarik lapisan kembali ke tempat yang berguna:
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>
Teknik ini memiliki beberapa masalah. Jika daftar menjadi panjang, itu tidak benar-benar membungkus gambar, yang cukup banyak mengalahkan seluruh tujuan penggunaan floatpada gambar.
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>
Tetapi saya benar-benar ingin membungkus daftar!
Ok, jadi jika Anda lebih gila lagi dan Anda benar-benar harus melanjutkan jalan ini, ada teknik lain yang dapat digunakan untuk membungkus item daftar dan mempertahankan peluru.
Alih-alih melapisi <ul>dan mencoba membuatnya berperilaku baik dengan peluru (yang sepertinya tidak pernah ingin dilakukan), bawa peluru itu dari <ul>dan berikan ke <li>s. Peluru itu berbahaya, dan orang yang <ul>adil tidak cukup bertanggung jawab untuk menanganinya dengan benar.
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>
Perilaku pembungkus ini dapat melakukan hal-hal aneh pada konten yang kompleks, jadi saya tidak menyarankan untuk menambahkannya secara default. Jauh lebih mudah untuk mengaturnya sebagai sesuatu yang dapat dipilih daripada sesuatu yang harus diganti.
