বাকী প্রস্থটি একটি ডিভি পূরণ করুন

Question 1

কীভাবে আমি একটি ডিভি বাকী প্রস্থটি পূরণ করতে পারি?

<div id="Main" style="width: 500px;">
    <div id="div1" style="width: 100px;"></div>
    <div id="div2"></div>
    <div id="div3" style="width: 100px; float: right;"></div>
</div>

কীভাবে আমি div2বাকীটি পূরণ করতে পারি ?

Question 2

এরকম কিছু চেষ্টা করে দেখুন:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

ডিভগুলি স্বাভাবিকভাবেই তাদের ধারকটির 100% প্রস্থ গ্রহণ করবে, স্পষ্টভাবে এই প্রস্থটি সেট করার দরকার নেই। বাম / ডান মার্জিনটি উভয় পক্ষের ডিভের মতো একইভাবে যুক্ত করে, এটির নিজস্ব বিষয়বস্তু তাদের মাঝে বসতে বাধ্য হয়।

নোট করুন যে "মিডল ডিভ" HTML এ "ডান ডিভ" এর পরে চলেছে

Question 3

আপ-টু-ডেট সমাধান (অক্টোবর 2014): তরল বিন্যাসের জন্য প্রস্তুত

ভূমিকা:

এই দ্রষ্টব্যটি সরবরাহকারীর চেয়ে আরও সহজ Leigh। এটি আসলে এটির উপর ভিত্তি করে।

এখানে আপনি লক্ষ করতে পারেন যে মাঝারি উপাদানটির (আমাদের ক্ষেত্রে, "content__middle"শ্রেণি সহ) নির্দিষ্ট কোনও মাত্রিক সম্পত্তি নেই - প্রস্থ, প্যাডিং বা মার্জিন সম্পর্কিত সম্পত্তি মোটেও নেই - তবে কেবল একটি overflow: auto;(নোট 1 দেখুন)।

দুর্দান্ত সুবিধাটি হ'ল এখন আপনি আপনার বাম এবং ডান উপাদানগুলিতে একটি max-widthএবং একটি নির্দিষ্ট করতে পারেনmin-width । যা তরল লেআউটের জন্য চমত্কার .. তাই প্রতিক্রিয়াশীল বিন্যাস :-)

দ্রষ্টব্য 1: বনাম লেইচের উত্তর যেখানে আপনাকে ক্লাসে margin-left& margin-rightবৈশিষ্ট্যগুলি যুক্ত করতে হবে "content__middle"।

অ-তরল বিন্যাস সহ কোড:

এখানে বাম এবং ডান উপাদানগুলির (শ্রেণিগুলির সাথে "content__left"এবং "content__right") একটি নির্দিষ্ট প্রস্থ রয়েছে (পিক্সেলগুলিতে): সুতরাং অ-তরল বিন্যাস বলা হয়।

Http://jsbin.com/qukocefudusu/1/edit?html,css , আউটপুট লাইভ ডেমো

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content {
        width: 100%;
    }
    .content__left {
        width: 100px;
        float: left; /* [1] */
        background-color: #fcc;
    }
    .content__middle {
        background-color: #cfc;
        overflow: auto; /* [2] */
    }
    .content__right {
        width: 100px;
        float: right; /* [3] */
        background-color: #ccf;
    }
</style>

<div class="content">
    <div class="content__left">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

তরল বিন্যাস সহ কোড:

এখানে বাম এবং ডান উপাদানগুলির (শ্রেণি "content__left"এবং সহ "content__right") একটি পরিবর্তনশীল প্রস্থ রয়েছে (শতাংশে) তবে ন্যূনতম এবং সর্বাধিক প্রস্থও: তাই তরল বিন্যাস বলা হয়।

max-widthবৈশিষ্ট্যগুলি সহ একটি তরল বিন্যাসে লাইভ ডেমো http://jsbin.com/runahoremuwu/1/edit?html,css, আউটপুট

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content { 
        width: 100%; 
    }
    .content__left { 
        width: 20%; 
        max-width: 170px;  
        min-width: 40px;  
        float: left; /* [1] */
        background-color: #fcc; 
     }
    .content__middle { 
        background-color: #cfc; 
        overflow: auto; /* [2] */
    }
    .content__right { 
        width: 20%; 
        max-width: 250px; 
        min-width: 80px; 
        float: right; /* [3] */
        background-color: #ccf; 
    }
</style>

<div class="content">
    <div class="content__left">
        max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

ব্রাউজার সমর্থন

নিম্নলিখিত ওয়েব ব্রাউজারগুলিতে ব্রাউজারস্ট্যাক.কম-এ পরীক্ষিত:

আই 7 থেকে আই 11
এফএফ 20, এফএফ 28
সাফারি 4.0 (উইন্ডোজ এক্সপি), সাফারি 5.1 (উইন্ডোজ এক্সপি)
ক্রোম 20, ক্রোম 25, ক্রোম 30, ক্রোম 33,
অপেরা 20

Question 4

ফ্লেক্স-বাক্সগুলি সমাধান - এবং সেগুলি দুর্দান্ত। আমি এক দশক ধরে CSS এর বাইরে এই জাতীয় কিছু চাইছিলাম। আপনার কেবলমাত্র display: flex"মেইন" এবং flex-grow: 100(যেখানে 100 নির্বিচারে - এটি ঠিক 100 হওয়া গুরুত্বপূর্ণ নয়) এর জন্য আপনার স্টাইলটিতে যুক্ত করা দরকার । এই স্টাইলটি যুক্ত করার চেষ্টা করুন (প্রভাবটি দৃশ্যমান করতে রঙগুলি যুক্ত করা হয়েছে):

<style>
    #Main {
        background-color: lightgray;
        display: flex;
    }

    #div1 {
        border: 1px solid green;   
        height: 50px; 
        display: inline-flex; 
    }
    #div2 {
        border: 1px solid blue;    
        height: 50px;
        display: inline-flex;
        flex-grow: 100;
    }
    #div3 {
        border: 1px solid orange;        
        height: 50px;
        display: inline-flex;
    }
</style>

ফ্লেক্স বক্স সম্পর্কে আরও তথ্য এখানে: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Question 5

এটি অর্জনের জন্য সিএসএস ফ্লেক্সবক্স flex-grow সম্পত্তি ব্যবহার করুন ।

.main {
  display: flex;
}
.col-1, .col-3 {
  width: 100px;
}
.col-2 {
  flex-grow: 1;
}

<div class="main">
  <div class="col-1" style="background: #fc9;">Left column</div>
  <div class="col-2" style="background: #eee;">Middle column</div>
  <div class="col-3" style="background: #fc9;">Right column</div>
</div>

স্নিপেট প্রসারিত করুন

Question 6

bitউত্তর পোস্ট করতে দেরি হলেও , মার্জিন ব্যবহার না করেই এখানে বিকল্প পদ্ধতি।

<style>
    #divMain { width: 500px; }
    #div1 { width: 100px; float: left; background-color: #fcc; }
    #div2 { overflow:hidden; background-color: #cfc; }
    #div3 { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="div1">
        div 1
    </div>
    <div id="div3">
        div 3
    </div>
    <div id="div2">
        div 2<br />bit taller
    </div>
</div>

এই পদ্ধতিটি যাদুবিদ্যার মতো কাজ করে তবে এখানে একটি ব্যাখ্যা:) \

এখানে একটি অনুরূপ নমুনা সহ ফিডল।

Question 7

বাকী স্থানটি নিতে হবে এমন ডিভের একটি শ্রেণি হতে হবে .. অন্যান্য ডিভগুলি আইডি (গুলি) হতে পারে তবে তাদের প্রস্থ থাকতে হবে ..

সিএসএস :

#main_center {
    width:1000px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    display:block;
}
#left {
    width:200px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    background:#c6f5c6;
    float:left;
}
.right {
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    overflow:hidden;
    background:#000fff;
}
.clear {
    clear:both;
}

এইচটিএমএল :

<body>
    <div id="main_center">
        <div id="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>

নিম্নলিখিত লিঙ্কটিতে কার্যক্রমে কোড রয়েছে, যা বাকী অঞ্চল কভারেজ ইস্যুটি সমাধান করা উচিত।

jsFizz

Question 8

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

#wrapper {
  clear: both;
  width: 100%;
}

#wrapper div {
  display: inline-block;
  height: 500px;
}

#center {
  background-color: green;
  margin: 0 auto;
  overflow: auto;
  width: 500px;
}

#left {
  float: left;
}

#right {
  float: right;
}

.fluid {
  background-color: yellow;
  width: calc(50% - 250px);
}

<div id="wrapper">
  <div id="center">
    This is fixed width in the centre
  </div>
  <div id="left" class="fluid">
    This is fluid width on the left
  </div>
  <div id="right" class="fluid">
    This is fluid width on the right
  </div>
</div>

স্নিপেট প্রসারিত করুন

আপনি যদি #centerউপাদানটির প্রস্থ পরিবর্তন করেন তবে আপনাকে এর প্রস্থের বৈশিষ্ট্যটি আপডেট .fluidকরতে হবে:

width: calc(50% - [half of center width]px);