คำปฏิเสธ
รายการถัดจากองค์ประกอบลอยทำให้เกิดปัญหา ในความคิดของฉันวิธีที่ดีที่สุดในการป้องกันปัญหาการลอยตัวเหล่านี้คือการหลีกเลี่ยงภาพลอยที่ตัดกับเนื้อหา นอกจากนี้ยังจะช่วยเมื่อคุณต้องสนับสนุนการออกแบบที่ตอบสนอง
การออกแบบที่เรียบง่ายของการมีภาพที่อยู่ตรงกลางระหว่างย่อหน้าจะดูน่าสนใจและให้การสนับสนุนได้ง่ายกว่าการพยายามจินตนาการให้มากเกินไป <figure>นอกจากนี้ยังเป็นหนึ่งในขั้นตอนออกไปจาก
แต่ฉันต้องการภาพลอยจริงๆ!
ตกลงดังนั้นหากคุณคลั่งไคล้หนักแน่นพอที่จะเดินไปตามเส้นทางนี้ได้มีเทคนิคสองสามอย่างที่สามารถใช้ได้
วิธีที่ง่ายที่สุดคือการทำให้รายการใช้งานoverflow: hiddenหรือoverflow: scrollเพื่อให้รายการถูกห่อหุ้มเป็นหลักซึ่งดึงการเติมกลับไปยังตำแหน่งที่เป็นประโยชน์:
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>
เทคนิคนี้มีปัญหาเล็กน้อยว่า หากรายการมีความยาวแสดงว่ามันไม่ได้ล้อมรอบรูปภาพซึ่งจะเอาชนะจุดประสงค์ทั้งหมดของการใช้floatภาพ
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>
แต่ฉันต้องการห่อรายการจริงๆ!
ตกลงดังนั้นถ้าคุณบ้าคลั่งยิ่งกว่าเดิมและคุณต้องเดินไปตามเส้นทางนี้ต่อไปจะมีอีกเทคนิคหนึ่งที่สามารถใช้ห่อรายการและบำรุงรักษากระสุน
แทนที่จะช่องว่างภายใน<ul>และพยายามที่จะได้รับมันจะประพฤติอย่างด้วยกระสุน (ซึ่งมันไม่น่าจะต้องการที่จะทำ) ใช้กระสุนเหล่านั้นออกไปจาก<ul>และให้พวกเขาไป<li>s สัญลักษณ์แสดงหัวข้อย่อยเป็นอันตรายและ<ul>เพียงแค่ไม่รับผิดชอบพอที่จะจัดการอย่างถูกต้อง
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>
พฤติกรรมการห่อนี้สามารถทำสิ่งแปลก ๆ กับเนื้อหาที่ซับซ้อนดังนั้นฉันไม่แนะนำให้เพิ่มโดยค่าเริ่มต้น มันง่ายกว่ามากในการตั้งค่าเป็นสิ่งที่สามารถเลือกได้มากกว่าสิ่งที่จะต้องถูกแทนที่
