Khước từ
Danh sách bên cạnh các yếu tố nổi gây ra vấn đề. Theo tôi, cách tốt nhất để ngăn chặn các loại vấn đề nổi này là tránh các hình ảnh nổi giao nhau với nội dung. Nó cũng sẽ giúp ích khi bạn phải hỗ trợ thiết kế đáp ứng.
Một thiết kế đơn giản có hình ảnh trung tâm giữa các đoạn sẽ trông rất hấp dẫn và dễ hỗ trợ hơn nhiều so với cố gắng để trở nên quá lạ mắt. Đó cũng là một bước đi từ a <figure>.
Nhưng tôi thực sự muốn hình ảnh nổi!
Ok, vì vậy nếu bạn đủ điên rồ để tiếp tục con đường này, có một số kỹ thuật có thể được sử dụng.
Đơn giản nhất là làm cho danh sách được sử dụng overflow: hiddenhoặc overflow: scrollsao cho danh sách về cơ bản được thu nhỏ lại, điều đó kéo phần đệm trở lại nơi hữu ích:
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>
Kỹ thuật này có một vài vấn đề mặc dù. Nếu danh sách dài, nó không thực sự bao quanh hình ảnh, điều này đánh bại khá nhiều mục đích sử dụng floattrên hình ảnh.
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>
Nhưng tôi thực sự muốn danh sách gói!
Ok, vì vậy nếu bạn thậm chí còn điên rồ hơn và bạn nhất định phải tiếp tục đi theo con đường này, có một kỹ thuật khác có thể được sử dụng để bọc các mục danh sách và duy trì đạn.
Thay vì đệm <ul>và cố gắng làm cho nó hoạt động tốt với những viên đạn (điều mà dường như không bao giờ muốn làm), hãy lấy những viên đạn đó ra khỏi <ul>và đưa chúng cho <li>s. Đạn rất nguy hiểm và <ul>không đủ trách nhiệm để xử lý chúng đúng cách.
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>
Hành vi gói này có thể làm những điều kỳ lạ đối với nội dung phức tạp, vì vậy tôi không khuyên bạn nên thêm nó theo mặc định. Dễ dàng hơn nhiều để thiết lập nó như một thứ có thể được chọn tham gia thay vì một cái gì đó phải được ghi đè.
