অবস্থান: পরম এবং পিতামাতার উচ্চতা?

Question 1

আমার কিছু ধারক রয়েছে এবং তাদের বাচ্চাদের কেবল পরম / তুলনামূলকভাবে অবস্থান রয়েছে are পাত্রে উচ্চতা কীভাবে সেট করবেন যাতে তাদের বাচ্চারা তাদের ভিতরে থাকে?

কোডটি এখানে:

এইচটিএমএল

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="one"></div>
        <div class="two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->

<section id="bar">
    <header>bar</header>
    <article>
        <div class="one"></div><div></div>
        <div class="two"></div>
    </article>
</section>

সিএসএস

article {
    position: relative;
}

.one {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: absolute;
    top: 10px;
    right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

এখানে একটি jsfiddle আছে। আমি চাই "বার" পাঠ্যটি তাদের পিছনে নয়, 4 স্কোয়ারের মধ্যে প্রদর্শিত হোক।

http://jsfiddle.net/Ht9Qy/

কোন সহজ সমাধান?

মনে রাখবেন যে আমি এই বাচ্চাদের উচ্চতা জানি না এবং আমি উচ্চতা নির্ধারণ করতে পারি না: ধারকগুলির জন্য এক্সএক্সএক্সএক্স।

Question 2

আপনি যদি সঠিকভাবে করার চেষ্টা করছেন তা যদি আমি বুঝতে পারি, তবে আমি মনে করি না যে সিএসএসের মাধ্যমে বাচ্চাদের একেবারে অবস্থান করে রাখা সম্ভব।

পুরোপুরি অবস্থানযুক্ত উপাদানগুলি ডকুমেন্ট প্রবাহ থেকে পুরোপুরি সরিয়ে ফেলা হয় এবং এইভাবে তাদের মাত্রাগুলি তাদের পিতামাতার মাত্রা পরিবর্তন করতে পারে না।

বাচ্চাদের যেমন রাখার সময় আপনার যদি সত্যিই এটির প্রভাব অর্জন করতে হয় তবে আপনি position: absoluteজাভাস্ক্রিপ্টের মাধ্যমে একে একে পুরোপুরি অবস্থিত বাচ্চাদের রেন্ডার করার পরে উচ্চতা খুঁজে পেয়ে এবং পিতামাতার উচ্চতা নির্ধারণ করে এটি ব্যবহার করতে পারেন।

বিকল্পভাবে, বাচ্চাদের দস্তাবেজের প্রবাহে রাখার সময় একই অবস্থানের প্রভাব পেতে কেবল float: left/ float:rightএবং মার্জিন ব্যবহার overflow: hiddenকরুন, তারপরে আপনি তার পিতামাতার (বা অন্য কোনও ক্লিয়ারফিক্স কৌশল) এর উচ্চতাটি তার বাচ্চাদের তুলনায় প্রসারিত করতে পারেন।

article {
    position: relative;
    overflow: hidden;
}

.one {
    position: relative;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

Question 3

এখানে আমার কার্যনির্বাহী,
আপনার উদাহরণে আপনি। ও ও। দুটি উপাদানগুলির "একই শৈলীগুলি" সহ তৃতীয় উপাদান যুক্ত করতে পারেন তবে নিখুঁত অবস্থান ছাড়াই এবং গোপন দৃশ্যমানতা সহ:

এইচটিএমএল

<article>
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
</article>

সিএসএস

.three{
    height: 30px;
    z-index: -1;
    visibility: hidden;
}

Question 4

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

.mejs-container.mejs-container-fullscreen {
    // This rule applies only to the container when in fullscreen
    padding-top: 57%;
}

এছাড়াও, আপনি যদি সিএসএস ব্যবহার করে আপনার মিডিয়ালেট ভিডিওর তরল তৈরি করতে চান তবে নীচে ক্রিস কোয়েরের দুর্দান্ত কৌশল: http://css-tricks.com/rundown-of-handling-flexible-media/

এটি কেবল আপনার সিএসএসে যুক্ত করুন:

.mejs-container {
    width: 100% !important;
    height: auto !important;
    padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
    width: 100% !important;
    height: 100% !important;
}
.mejs-mediaelement video {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
}

আমি আসা করি এটা সাহায্য করবে.

Question 5

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

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="main one"></div>
        <div class="main two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>

<section id="bar">
    <header>bar</header>
    <article>
        <div class="main one"></div><div></div>
        <div class="main two"></div>
    </article>
</section> 

* { text-align: center; }
article {
    height: fit-content ;
    display: flex;
    justify-content: space-between;
    background: whitesmoke;
}
article div { 
    background: yellow;     
    margin:20px;
    width: 30px;
    height: 30px;
    }

.one {
    background: red;
}

.two {
    background: blue;
}

আমি ওপি'র বেহালার পরিবর্তন করেছি: http://jsfiddle.net/taL4s9fj/

ফ্লেক্সবক্সে সিএসএস-কৌশল: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Question 6

আপনি গ্রিডের সাহায্যে এটি করতে পারেন:

article {
    display: grid;
}

.one {
    grid-area: 1 / 1 / 2 / 2;
}

.two {
    grid-area: 1 / 1 / 2 / 2;
}

Question 7

এটি আর দেরি করে দেওয়া উত্তর কিন্তু আমি চারটি স্কোয়ারের মধ্যে "বার" পাঠ্য রাখার মোটামুটি সহজ উপায়টি খুঁজে বের করেছি। এখানে আমি পরিবর্তন করেছি; বার বিভাগে আমি "বার" পাঠ্যটিকে একটি কেন্দ্র এবং ডিভি ট্যাগগুলির মধ্যে আবৃত করি।

<header><center><div class="bar">bar</div></center></header>

এবং সিএসএস বিভাগে আমি একটি "বার" শ্রেণি তৈরি করেছি যা উপরের ডিভি ট্যাগে ব্যবহৃত হয়। এটি যুক্ত করার পরে বার পাঠ্যটি চার রঙিন ব্লকের মধ্যে কেন্দ্রীভূত ছিল।

.bar{
    position: relative;
}