html - অবশিষ্ট প্রস্থ নিতে একটি div প্রসারিত করুন




css css3 (14)

Flexbox সমাধান

html, body {
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.second {
  flex-grow: 1;
}
<div class="wrapper">
  <div style="background: #fc9;">Tree</div>
  <div class="second" style="background: #ccc;">View</div>
</div>

নোট: আপনার সমর্থিত ব্রাউজার দ্বারা প্রয়োজন হলে ফ্লেক্স বিক্রেতাদের উপসর্গ যোগ করুন।

আমি একটি দুই কলাম ডিভি লেআউট চাই, যেখানে প্রত্যেকের পরিবর্তনশীল প্রস্থ যেমন থাকতে পারে

div {
    float: left;
}
.second {
    background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>

আমি 'ভিউ' ডিভিটি 'ট্রি' ডিভিজের প্রয়োজনীয় স্থান পূরণ করার পরে উপলব্ধ সমস্ত প্রস্থে প্রসারিত করতে চাই। বর্তমানে আমার 'ভিউ' ডিভিটি এটিতে থাকা সামগ্রীতে পুনরায় আকার পরিবর্তন করা হয়েছে যদি উভয় divs পুরো উচ্চতা গ্রহণ করে তবে এটিও ভাল হবে

সদৃশ দাবিত্যাগ নয়:

ফ্লোটটি যখন সর্বোচ্চ প্রস্থে প্রবাহিত করুন: বাম সেট করা হয়েছে কারণ বামে একটি নির্দিষ্ট প্রস্থ আছে।

Div দিয়ে সাহায্য করুন - ডিভিডিটিকে অবশিষ্ট প্রস্থে মাপসই করুন কারণ আমি দুটি কলাম দুটি বামে সন্নিবেশ করাতে চাই


Simpl.css প্লাগ জন্য ধন্যবাদ!

যেমন কলাম ColumnWrapper আপনার সব কলাম মোড়ানো মনে রাখবেন।

<div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
</div>

আমি সিম্পল সিএসএস এর সংস্করণ 1.0 প্রকাশ করতে যাচ্ছি তাই শব্দটি ছড়িয়ে দিতে সাহায্য করুন!


আপনি W3 এর সিএসএস লাইব্রেরি ব্যবহার করতে পারেন যা rest একটি ক্লাস রয়েছে যা কেবল এটি করে:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

পৃষ্ঠার header মধ্যে সিএসএস লাইব্রেরি লিঙ্ক করতে ভুলবেন না:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

এখানে অফিসিয়াল ডেমো: W3 স্কুল Tryit এডিটর


আমি জাভাস্ক্রিপ্ট ফাংশন লিখেছিলাম যা আমি jQuery $ (ডকুমেন্ট) .ready () থেকে কল করি। এটি অভিভাবক বিভাগের সকল সন্তানদের বিশ্লেষণ করবে এবং শুধুমাত্র সর্বাধিক সন্তানের অধিকার আপডেট করবে।

এইচটিএমএল

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

জাভাস্ক্রিপ্ট

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}

আমি শুধু ফ্লেক্স বক্স এর জাদু আবিষ্কৃত (প্রদর্শন: ফ্লেক্স)। এটা চেষ্টা কর:

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

ফ্লেক্স বাক্সগুলি আমাকে 15 বছরের জন্য সিএসএসের নিয়ন্ত্রণের জন্য নিয়ন্ত্রণ দিয়েছে। এখানে অবশেষে এখানে! আরও তথ্য: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


উপলব্ধ সিএসএস বিন্যাস ফ্রেমওয়ার্ক তাকান আছে। আমি Simpl বা সামান্য আরো জটিল, ব্লুপ্রিন্ট ফ্রেমওয়ার্ক সুপারিশ করবে।

আপনি সিম্পল ব্যবহার করছেন (যা কেবল একটি সরল.css ফাইল আমদানি করে), আপনি এটি করতে পারেন:

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

, 50-50 লেআউটের জন্য বা:

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

, 25-75 এক জন্য।

এটা যে সহজ।


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

আমি flexbox ব্যবহার করে লেআউট বুঝতে এবং নকশা করার জন্য একটি বিনামূল্যে হাতিয়ার উন্নত করেছি। এখানে দেখুন: http://algid.com/Flex-Designer

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}
<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>


এই সমাধান আসলে খুব সহজ, কিন্তু সব সুস্পষ্ট নয়। আপনাকে "ব্লক ফর্ম্যাটিং প্রসঙ্গ" (বিএফসি) নামক কিছু ট্রিগার করতে হবে, যা একটি নির্দিষ্ট উপায়ে ফ্ল্যাটগুলির সাথে ইন্টারঅ্যাক্ট করে।

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

এটি সমস্ত বর্তমান ব্রাউজার জুড়ে কাজ করা উচিত, যদিও আপনাকে IE6 এবং 7 এ হ্যায়েআউট ট্রিগার করতে হতে পারে। আমি মনে করতে পারছি না।

ডেমোস:


এখানে, এই সাহায্য করতে পারে ...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>


এটি এমন একটি ভাল উদাহরণ যা টেবিলগুলির সাথে ছোট এবং কঠিন (যদি কমপক্ষে ক্রস-ব্রাউজারের অর্থে না হয়) সিএসএসের সাথে কাজ করা অসম্ভব।

উভয় কলাম প্রস্থ নির্দিষ্ট করা হয়, তাহলে, এটা সহজ হবে।

কলামগুলির একটিতে প্রস্থ স্থির করা থাকলে, এটি সামান্য কঠিন কিন্তু সম্পূর্ণরূপে কার্যকর হবে।

উভয় কলামের পরিবর্তনশীল প্রস্থের সাথে, IMHO আপনাকে কেবল দুটি কলামের টেবিল ব্যবহার করতে হবে।


প্যাট - আপনি সঠিক। এই সমাধানটি "ডাইনোসর" এবং সমসাময়িক উভয়কেই সন্তুষ্ট করবে। :)

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}
<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>


ফ্লেক্স-হত্তয়া - এটি প্রয়োজন হলে একটি ফ্লেক্স আইটেম হত্তয়া জন্য ক্ষমতা নির্ধারণ করে। এটি একটি অনুপাত হিসাবে কাজ করে যে একটি ইউনিটহীন মান গ্রহণ করে। আইটেমটিকে গ্রহণ করা উচিত এমন ফ্লেক্স কন্টেইনারের ভিতরে উপলব্ধ পরিমাণের পরিমাণ এটি নির্দেশ করে।

যদি সমস্ত আইটেমগুলিতে ফ্লেক্স-হাবল থাকে 1 টি সেট থাকে, তবে কন্টেইনারের অবশিষ্ট স্থান সব শিশুদের সমানভাবে বিতরণ করা হবে। যদি শিশুদের মধ্যে একটিের মান 2 হয়, অবশিষ্ট স্থানটি দ্বিগুণ স্থানটিকে অন্যের মতো স্থান হিসাবে গ্রহণ করবে (অথবা এটি অন্তত চেষ্টা করবে)। https://css-tricks.com/snippets/css/a-guide-to-flexbox/ আরো দেখুন

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}
<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>


সামান্য ভিন্ন বাস্তবায়ন,

দুটি ডিভ প্যানেল (বিষয়বস্তু + অতিরিক্ত), পাশাপাশি, extra panel উপস্থিত না থাকলে content panel প্রসারিত হয়।

jsfiddle: http://jsfiddle.net/qLTMf/1722/


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

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}
<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

এর সাথে সমস্যাটি হল যে সকল প্রস্থ অবশ্যই স্পষ্টভাবে সংজ্ঞায়িত করা উচিত, হয় মান হিসাবে (পx এবং এম কাজ জরিমানা), অথবা কিছু নির্দিষ্ট শতাংশ হিসাবে নিজেকে স্পষ্টভাবে সংজ্ঞায়িত করা।





multiple-columns