সন্তানের ভাসমান অবস্থায় পিতামাতার দ্বি উচ্চতা শূন্য কেন

Question

আমার সিএসএসে নিম্নলিখিতগুলি রয়েছে। সমস্ত মার্জিন / প্যাডিংস / সীমানা বিশ্বব্যাপী 0 এ পুনরায় সেট করা হয়েছে।

#wrapper{width: 75%; min-width: 800px;}
.content{text-align: justify; float: right; width: 90%;}
.lbar{text-align: justify; float: left; width: 10%;}

এখন যখন আমি আমার এইচটিএমএল লিখি

<div id="wrapper">
    <div class="content">
        some text here
    </div>
    <div class="lbar">
        some text here
    </div>
</div>

পৃষ্ঠাটি সঠিকভাবে রেন্ডার করে। যাইহোক, আমি যখন উপাদানগুলি পরিদর্শন করি তখন উচ্চ div#wrapperহিসাবে প্রদর্শিত হয় 0px। আমি শেষের দিকে এটি প্রসারিত হওয়ার আশা করতাম div.contentএবং div.lbarকেন ... কেন এটি ঘটে?

আবার, পৃষ্ঠাটি জরিমানা করে। এই আচরণটি আমাকে কেবল বিচলিত করে।

Comments

এই আপনার জন্য উপযোগী হতে পারে সিএসএস Floats 101 থেকে একটি পৃথক্ তালিকা ।

— ডেভিড বলেছেন মনিকা

Answer 1

ভাসমান সামগ্রীগুলি তার ধারকটির উচ্চতা প্রভাবিত করে না। উপাদানটিতে এমন কোনও সামগ্রী নেই যা ভাসমান নয় (সুতরাং কোনও কিছুই ধারকটির উচ্চতা 0 হওয়া বাধা দেয় না, যেন এটি খালি)।

ধারকটির overflow: hiddenউপর সেট করা একটি নতুন ব্লক ফর্ম্যাটিং প্রসঙ্গ স্থাপনের মাধ্যমে তা এড়াবে । দেখুন ভাসে ধারণকারী জন্য পদ্ধতি অন্যান্য প্রযুক্তি এবং ভাসে ধারণকারী কেন সিএসএস এই ভাবে পরিকল্পনা করা হয়েছিল সম্পর্কে একটি ব্যাখ্যা জন্য।

Comments

পাত্রে উপাদানগুলি যুক্ত না করেই সিএসএসে সমাধান করা ফ্লোটগুলি ধারণ করে কনটেইনারগুলি তৈরি করার জন্য এখানে অন্য পদ্ধতির ।

— ফিল

Answer 2

সাধারনত floatগুলি তাদের বাবা লেআউট গণনা করা হয় না।

এটি রোধ করতে, overflow: hiddenপিতামাতার সাথে যুক্ত করুন।

Comments

ধন্যবাদ, এটি কাজ করে, তবে আমি বুঝতে পারি না কেন ... ওভারফ্লো: লুকানো বলা হয় যে সামগ্রীটি যে ওভারফ্লো হয় তা আড়াল করে না, উপাদানটি এতে রাখার জন্য এটি বাড়ানো হয় না।

— রিপার 234

: @ ripper234 এখানে কেন stackoverflow.com/questions/25818199/...

— kristianp

Answer 3

আমি নিশ্চিত নই যে এটি একটি সঠিক উপায় তবে আমি display: inline-block;মোড়ক ডিভ যুক্ত করে এটি সমাধান করেছি ।

#wrapper{
    display: inline-block;
    /*border: 1px black solid;*/
    width: 75%;
    min-width: 800px;
}

.content{
    text-align: justify; 
    float: right; 
    width: 90%;
}

.lbar{
    text-align: justify; 
    float: left; 
    width: 10%;
}

Comments

এটি হ'ল সঠিক সমাধানটি আমি সন্ধান করছি। উপচে পড়া: লুকানো কারণ বাক্সের ছায়াটি স্বাভাবিকভাবেই অদৃশ্য হয়ে যায়।

— কিটিয়ারা