বাইরের ডিভকে স্বয়ংক্রিয়ভাবে এর ভাসমান সামগ্রী হিসাবে একই উচ্চতায় পরিণত করুন

Question

আমি বাহ্যিকটি চাই div, যা কালো এটির divমধ্যে এটির ভাসমান রেকর্ড করতে। আমি ব্যবহার করতে চান style='height: 200pxমধ্যে divদিয়ে outerdivআইডি হিসাবে আমি এটি স্বয়ংক্রিয়ভাবে এর বিষয়বস্তু উচ্চতা হতে চান (যেমন, ভাসমান divগুলি)।

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

কীভাবে এটি অর্জন করবেন?

Answer 1

আপনি outerdivএটির সিএসএস সেট করতে পারেন

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

আপনি এটির শেষে একটি উপাদান যুক্ত করে এটি করতে পারেন clear: both। এটি সাধারণত জেএস (কোনও ভাল সমাধান নয়) বা :afterসিএসএস সিউডো উপাদান (পুরানো আইএসগুলিতে বহুলভাবে সমর্থিত নয় ) সহ যুক্ত করা যেতে পারে ।

সমস্যাটি হ'ল কনটেইনারগুলি স্বাভাবিকভাবে ভাসমান বাচ্চাদের অন্তর্ভুক্ত করতে প্রসারিত করবে না। প্রথম উদাহরণটি ব্যবহার করে সতর্ক হোন, যদি আপনার পিতামাতার উপাদানগুলির বাইরে কোনও বাচ্চাদের উপাদান থাকে তবে সেগুলি লুকানো থাকবে। আপনি সম্পত্তি মান হিসাবে 'অটো'ও ব্যবহার করতে পারেন, তবে এটির বাইরে কোনও উপাদান উপস্থিত থাকলে এটি স্ক্রোলবারগুলি শুরু করবে।

আপনি প্যারেন্ট পাত্রে ভাসানোর চেষ্টা করতে পারেন তবে আপনার নকশার উপর নির্ভর করে এটি অসম্ভব / কঠিন হতে পারে।

Comments

আমি আশা করি আমি কেন ওভারফ্লো এর যুক্তিটি বুঝতে পারি: এই ক্ষেত্রে লুকানো কাজগুলি।

— মাস্টারোলারি

হ্যাঁ, আমি আশা করছিলাম যে এটি কেবল আমারই ছিল না যিনি ভেবেছিলেন এটির পাল্টা স্বজ্ঞাত। অ্যালেক্স?

— নিয়মিতমেকে

@ মাস্টারোলেরি @regularmike HTML/CSSকখনও কখনও ভাল UI প্রযুক্তি হতে পারে নি, সুতরাং এতে পাল্টা স্বজ্ঞাত জিনিসগুলি সাধারণ

— are

@masteroleary আমি বুঝতে পারছি এটি একটি পুরানো থ্রেড, কিন্তু আমি সম্প্রতি একটি অনুরূপ প্রশ্নের উত্তর দিতে চেষ্টা stackoverflow.com/questions/21041297#21041625 - আশা এটা সাহায্য করে

— xec

floatসমাধানের জন্য +1 । অন্যদের ব্যর্থতার সাথে খুব ভাল কাজ করে, বিশেষত যখন টুইটার বুটস্ট্র্যাপের সাথে জুটিবদ্ধ হয়।

— ফিজিক্স

Answer 2

প্রথমত, আমি আপনার সিএসএস স্টাইলিংটি ইনলাইন না করে বরং কোনও বাহ্যিক সিএসএস ফাইলে করার পরামর্শ দিচ্ছি। এটি বজায় রাখা আরও সহজ এবং ক্লাস ব্যবহার করে আরও পুনরায় ব্যবহারযোগ্য হতে পারে।

"শেষে একটি উপাদান যুক্ত করে পরিষ্কার করুন: উভয়ই" এর অ্যালেক্সের উত্তর (এবং গ্যারেটের ক্লিয়ারফিক্স) বন্ধ করে দেওয়া, আপনি এটি এর মতো করতে পারেন:

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

এটি কাজ করে (তবে আপনি দেখতে পাচ্ছেন ইনলাইন সিএসএস এত সুন্দর নয়)।

Comments

আমি কেন রেটে গেলাম? এটি কাজ করে, এবং আমি ঠিকই স্বীকার করেছি যে এটি কোনও সুন্দর সমাধান নয়।

— লিকানা

আমি নিশ্চিত নই, আপনাকে কমপক্ষে 0-এ ফিরে পেতে আমি +1 করেছি। হতে পারে আপনাকে ভোট দেওয়া হয়েছে কারণ আপনি তাঁর ভুল সিএসএস সংশোধন করেন নি ... অর্থাৎ সিএসএস সম্পত্তি সেট করতে সমান চিহ্ন ব্যবহার করা ভুল rect

— অ্যালেক্স

যথেষ্ট ন্যায্য। আমি +1 অ্যালেক্স প্রশংসা করি। আমি ভেবেছিলাম এটি আমার বক্তব্যটি ন্যায্য।

— লাইকানা

এই সমাধানটি আরও ভাল আইএমও। আমার উত্তর যদি আমি এই উত্তরটি গ্রহণ করতাম।

— ksg91

Answer 3

আপনি http://www.sitepPoint.com/simple-cleering-of-floats/ এ বিস্তারিত হিসাবে স্ব-সমাপনী ভাসমানগুলি চেষ্টা করতে চাইতে পারেন

সুতরাং সম্ভবত চেষ্টা করুন overflow: auto(সাধারণত কাজ করে), বা overflow: hidden, যেমন অ্যালেক্স বলেছিলেন।

Comments

লুকানো কাজ, কিন্তু আপনি ঠিক বলেছেন, অটো কিছুটা ভাল কাজ করে। ধন্যবাদ

— ম্যাট সেটার

Answer 4

আমি জানি কিছু লোক আমাকে ঘৃণা করবে তবে আমি display:table-cellএই ক্ষেত্রে সহায়তা পেয়েছি ।

এটা সত্যিই পরিষ্কার।

Comments

বহিরাগত ডিভ ব্যবহার প্রদর্শন: টেবিল; এবং ডিভ ব্যবহারের প্রদর্শন ভিতরে: টেবিল-ঘর;

— অনুকুল লিম্পানাসিল

Answer 5

সবার আগে আপনি width=300pxযে ট্যাগটি সিএসএস নয়, তার জন্য একটি অ্যাট্রিবিউট সেটিংস ব্যবহার করবেন না তার width: 300px;পরিবর্তে ব্যবহার করুন।

আমি clearfixকৌশলটি প্রয়োগ করার পরামর্শ দেব #outerdiv। ক্লিয়ারফিক্স হ'ল 2 ভাসমান ডিভগুলি সাফ করার একটি সাধারণ সমাধান তাই প্যারেন্ট ডিভিটি 2 ভাসমান ডিভগুলি সামঞ্জস্য করতে প্রসারিত হবে।

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

আপনার পরিস্থিতি এবং ক্লিয়ারফিক্স এর সমাধানের জন্য কী করে তার উদাহরণ এখানে ।

Answer 6

JQuery ব্যবহার করুন:

মূল উচ্চতা = শিশু অফসেটহাইট সেট করুন।

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

Comments

ওভারকিল, যখন আপনি একা সিএসএস দিয়ে এটি করতে পারেন।

— অ্যালেক্স

আমার উত্তরের সাহায্যে আপনি প্যারেন্টের উচ্চতাটিকে চাইল্ড হাইটের মতোই সেট করতে পারেন তবে ওভারফ্লো ব্যবহার করে আমরা প্যারেন্ট উচ্চতা পরিবর্তন করছি না যা আমরা পিতামাতার বিভাজনের পরে ডেটা দেখালে কিছু সমস্যা তৈরি করবে।

— হরপাল

Answer 7

ব্যবহার clear: both;

আমি এটি একা চেষ্টা করার জন্য এক সপ্তাহ ধরে কাটিয়েছি!