ওভারফ্লোয়ের বাইরে শিশুকে দৃশ্যমান করুন: লুকানো পিতামাতার

Question

সিএসএসে overflow:hidden তাদের ভাসমান বাচ্চাদের উচ্চতার সাথে প্রসারিত করার জন্য অভিভাবক পাত্রে সেট করা থাকে।

এটির সাথে মিলিত হওয়ার সাথে সাথে এর আরও একটি আকর্ষণীয় বৈশিষ্ট্য রয়েছে margin: auto ...

পূর্ববর্তী সহোদর যদি একটি ভাসমান উপাদান হয় তবে এটি আসলে এটি জুটপোজ হিসাবে উপস্থিত হবে। এটি যদি সহোদর হয় float:leftতবে তার সাথে float:none overflow:hiddenধারকটি সহোদরের ডানদিকে উপস্থিত হবে, কোনও নতুন লাইন নেই - ঠিক যেমনটি এটি স্বাভাবিক প্রবাহে ভাসছে। পূর্ববর্তী ভাইবোনটি যদি থাকে float:rightতবে ধারকটি ভাইবোনটির বাম দিকে উপস্থিত হবে। এই ধারকটির আকার পরিবর্তন করা ভাসমান উপাদানগুলির মধ্যবর্তী স্থানে এটি সঠিকভাবে প্রদর্শিত হবে show বলুন, আপনার যদি পূর্ববর্তী দুই ভাইবোন থাকে, float:leftঅন্য একজন float:right, ধারকটি উভয়ের মধ্যবর্তী অভ্যন্তরে প্রদর্শিত হবে।

সুতরাং সমস্যা এখানে ...

বাচ্চাদের মুখোশ না দিয়ে কীভাবে আমি এই ধরণের লেআউটটি বজায় রাখতে পারি?

পুরো ওয়েব জুড়ে গুগলিং আমাকে কীভাবে clear:bothধারক এবং প্রসারিত করার উপায় দেয় ... তবে আমি বাম / ডান পূর্ববর্তী-শিশু কেন্দ্রীকরণ বজায় রাখার কোনও বিকল্প সমাধান খুঁজে পাচ্ছি না। আপনি যদি ধারক তৈরি করেন overflow:visibleতবে ধারকটি হঠাৎ ভাসমান উপাদানগুলির বিন্যাস প্রবাহকে উপেক্ষা করে এবং ভাসমান উপাদানটির স্তরযুক্ত শীর্ষে উপস্থিত হয়।

সুতরাং প্রশ্ন :

overflow:hiddenবিন্যাস সংরক্ষণের জন্য আমার কাছে ধারক থাকতে হবে ...

বাচ্চাদের মুখোশ না পড়ে আমি কীভাবে এটি তৈরি করতে পারি? আমার ধারকটির বাইরে পিতামাতার তুলনায় সন্তানের একেবারে অবস্থান করা দরকার।

বা

আমি কীভাবে overflow:visibleপাত্রের বাইরে পিতামাতার সাথে তুলনামূলকভাবে কোনও সন্তানের অবস্থান করতে পারি ... YET ভাইবোনের মতো ভাসমান-মতো লেআউট-প্রবাহকে সংরক্ষণ করবে?

Answer 1

আপনি clearfix"লেআউট সংরক্ষণ সংরক্ষণ" করতে একইভাবে করতে ব্যবহার করতে পারেন overflow: hidden।

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

class="clearfix"পিতামাতাকে ক্লাস যুক্ত করুন , এবং সরানoverflow: hidden;

Comments

হুঁ! চালাক, আমি এখন এটি নিয়ে পরীক্ষা-নিরীক্ষা করছি। আমি বর্তমানে যা পাচ্ছি তা হ'ল উত্পন্ন সামগ্রীটি সঠিকভাবে আচরণ করে, লেআউটটির প্রবাহে সংরক্ষণ করা হচ্ছে, তবে পিতামাতা এখনও এটিকে উপেক্ষা করবেন এবং ভাসমান উপাদানগুলির শীর্ষে থাকবেন। তবে এটি একটি খুব ভাল ধারণা এবং আমি এটির সাথে আরও সঠিকভাবে আচরণ করতে পারি এবং ভোটে ফিরতে পারি কিনা তা দেখতে আরও খেলব। ধন্যবাদ :).

— মার্কনেডাল

@ user1671639 আপনার উদাহরণটি একটি ক্লিয়ারফিক্সের জন্য সত্যিই প্রযোজ্য নয়। আপনার অন্য কিছু প্রয়োজন, তাই আমি আপনাকে আপনার সমস্যা নিয়ে একটি প্রশ্ন পোস্ট করার পরামর্শ দিই।

— ফ্রেক্সুজ

এটি মোটেও একইভাবে কাজ করে না overflow:hidden। পিতামাতার ডিভিতে একটি ক্লিয়ারফিক্স প্রয়োগ করা সমস্ত সন্তানের উপাদানগুলিকে পিতামাতার মতো একই উচ্চতায় "অন্তর্ভুক্ত" করতে দেয় না।

— খোম নাজিদ

Answer 2

পোস্ট করা উত্তরগুলির কোনওটিই আমার পক্ষে কাজ করেনি। position: absoluteসন্তানের উপাদান নির্ধারণ কাজ করে নি।

Comments

তবে পিতা-মাতা ডিআইভি যদি এটি পিতা-মাতার ডিআইভির সীমানা ছাড়িয়ে যায় (যা উপচে পড়েছে: লুকিয়ে আছে) তবে তা কী মুখোশটি কাটবে না?

— মার্কনেডাল

আফাইক এটি করে না, যতক্ষণ না পিতামাতার অবস্থান না থাকে: আপেক্ষিক। তারপরে শিশুটি নিয়মিত (পিতামাতার) ডোম প্রবাহের বাইরে নিয়ে তার প্রথম অবস্থিত (স্থিতিশীল নয়) পূর্বপুরুষের উপাদানটির সাথে তুলনামূলকভাবে অবস্থান করে।

— পিম শ্যাফাফ

যদি পিতামাতার অবস্থান থাকে: আপেক্ষিক এবং এর প্রয়োজন না হয় আপনি এটিকে অবস্থান তৈরি করতে পারেন: আনসেট করুন।

— ইয়াহলাদ

সত্য, যদি এটি position: fixedবা তার পিতামাতার বাইরের কোনও কিছুর তুলনায় পরম অবস্থান থাকে তবে তা visibility: hiddenদৃশ্যমান হবে। যাইহোক, আপনার কোডটি পরিবর্তনের ক্ষেত্রে আরও দৃust় হওয়ার জন্য আপনার প্রায়শই এটি পিতামাতার সাথে তুলনামূলকভাবে (অবস্থান করতে) প্রয়োজন। তাহলে এই সমাধানগুলি বিকল্প নয়।

— আর্নেহুগো

Answer 3

এটি একটি পুরানো প্রশ্ন তবে এটি নিজেই সম্মুখীন হয়েছি।

আমার কাছে সেমি-সমাধান রয়েছে যা পূর্ববর্তী প্রশ্নের পরিস্থিতিগতভাবে কাজ করে ("শিশুরা ওভারফ্লোতে দৃশ্যমান: লুকানো পিতামাতার")

যদি পিতামাত্ত্বিক ডিভের অবস্থানের প্রয়োজন না হয়: আপেক্ষিক, কেবলমাত্র শিশুদের শৈলীগুলি দৃশ্যমানতার জন্য সেট করুন: দৃশ্যমান।

যদি পিতামাত্ত্বিক ডিভের অবস্থান হওয়ার প্রয়োজন হয়: আপেক্ষিক, আমি বাচ্চাদের দেখানোর একমাত্র উপায় পজিশন ছিল: স্থির ছিল। এটি আমার পরিস্থিতির জন্য ভাগ্যক্রমে যথেষ্ট কাজ করেছে তবে আমি কল্পনা করব এটি অন্যের মধ্যে কাজ করবে না।

এখানে একটি কৃপণ উদাহরণটি দেখার জন্য কেবল এইচটিএমএল ফাইলটিতে পোস্ট করুন।

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

Comments

এখানে একটি কৃপণ উদাহরণটি দেখার জন্য কেবল এইচটিএমএল ফাইলটিতে পোস্ট করুন। <কোড> <ডি স্টাইল = "ব্যাকগ্রাউন্ড: # ff00ff; ওভারফ্লো: লুকানো; প্রস্থ: 500px; উচ্চতা: 500px; অবস্থান: আপেক্ষিক;"> <ডি স্টাইল = "পটভূমি: # ff0000; অবস্থান: স্থির; শীর্ষ: 10px; বাম : 10px; "> এস্যাসিডে <ডি স্টাইল =" ব্যাকগ্রাউন্ড: # 00ffff; প্রস্থ: 200px; ওভারফ্লো: দৃশ্যমান; অবস্থান: নিখুঁত; দৃশ্যমান: দৃশ্যমান; স্পষ্ট: উভয়; উচ্চতা: 1000px; শীর্ষ: 100px; বাম: 10px; "> a </div> </div> </div> </code>

— টমাস ডেভিস

উত্তর দেওয়ার চেষ্টা করার জন্য ধন্যবাদ, তবে এটি কার্যকর হয় না কারণ স্থির অবস্থানটি স্বয়ংক্রিয়ভাবে ভিউপোর্টের সাথে সম্পর্কিত উপাদানটিকে অবস্থান করে, যার অর্থ এটি পিতামাতার সাথে সরে যায় না । প্রকৃতপক্ষে, আপনার যদি একটি স্ক্রলিং পৃষ্ঠা থাকে তবে আপনি স্ক্রোল করার সাথে সাথে এটি 10px, 10px এ থাকবে।

— মার্কনেডাল

"যদি পিতামাতাকৃত ডিভের অবস্থানের প্রয়োজন হয়: আপেক্ষিক, আমি বাচ্চাদের দেখানোর একমাত্র উপায় পজিশন ছিল: স্থির"। তার জন্য ধন্যবাদ. আমার পপওভারের সাহায্যের বুদবুদ ছিল যা পিতামাতার ওভারফ্লো হয়ে থাকলেও ওভারফ্লো প্রয়োজন: স্ক্রোল। আমি একটি আপেক্ষিক অভ্যন্তরীণ এবং তারপরে একটি নির্দিষ্ট সামগ্রীর ক্ষেত্র সহ একটি পরম ডিভ করে শেষ করেছি।

— জ্যাকমোরিসি

ধন্যবাদ, এটি আমার পক্ষে কাজ করেছে। আমার পিতা বা মাতা পজিশনের সাথে সম্পর্কযুক্ত ছিল এবং এটির প্রয়োজন ছিল কারণ এটির অবস্থানটি ব্যবহার করে সেট করা হয়েছিল left। margin-leftপরিবর্তে ব্যবহার করা একই প্রভাব অর্জন করবে, সুতরাং আমার আর অবস্থানের তুলনামূলকভাবে ব্যবহার করার দরকার পড়েনি।

— ফিলিপ কাস্ত্রো

Answer 4

অন্যদের জন্য, যদি ক্লিয়ারফিক্স আপনার জন্য এটি সমাধান না করে, অ-ভাসমান ভাইবোনের সাথে মার্জিন যুক্ত করুন / যা ভাসমান ভাইবোন (গুলি) এর প্রস্থ (গুলি) এর সমান।