দাবি পরিত্যাগী
ভাসমান উপাদানগুলির পরবর্তী তালিকাগুলি সমস্যার সৃষ্টি করে। আমার মতে, এই ধরণের ভাসমান সমস্যাগুলি প্রতিরোধের সর্বোত্তম উপায় হ'ল ভাসমান চিত্রগুলি এড়িয়ে চলা যা সামগ্রীগুলির সাথে ছেদ করে। যখন আপনাকে প্রতিক্রিয়াশীল ডিজাইন সমর্থন করতে হবে তখন এটিও সহায়তা করবে।
অনুচ্ছেদের মধ্যে কেন্দ্রিক চিত্রগুলির একটি সাধারণ নকশা খুব আকর্ষণীয় দেখায় এবং খুব অভিনব হওয়ার চেষ্টা করার চেয়ে সমর্থন করা আরও সহজ হবে be এটি একটি থেকে এক ধাপ দূরে <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>সে। বুলেটগুলি বিপজ্জনক, এবং ন্যায়বিচারগুলি <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>
এই মোড়ানো আচরণ জটিল সামগ্রীতে অদ্ভুত জিনিসগুলি করতে পারে, তাই আমি এটি ডিফল্টরূপে যুক্ত করার পরামর্শ দিই না। এটিকে ওভাররাইড করা উচিত এমন কিছু না করে বেছে নেওয়া যায় এমন কিছু হিসাবে সেট আপ করা অনেক সহজ।
