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

552

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

div {
  float: left;
}

.second {
  background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>
স্নিপেট প্রসারিত করুন

আমি চাই 'বৃক্ষ' ডিভের প্রয়োজনীয় স্থান পূরণ করার পরে 'ভিউ' ডিভটি পুরো প্রস্থে প্রসারিত করতে হবে।

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

সদৃশ দাবি নকল:

html  css  multiple-columns 
— অনুরাগ ইউনিয়াল
সূত্র
1
— অ্যাড্রিন
1
হয় আমি প্রশ্নটি বুঝতে পারি না বা আপনি গ্রহণযোগ্য উত্তরটি কীভাবে চয়ন করেন তা আমি বুঝতে পারি না কারণ সেখানে প্রস্থ এবং উচ্চতা উভয়ইoverflow hidden
— ব্যবহারকারীর 10089632

উত্তর:

1013

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

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

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

ডেমোস:

— Xanthir
সূত্র
28
দুর্দান্ত উত্তর! আপনি যখন "অটো ব্যতীত অন্য কোনও ওভারফ্লো মান" এটি একটি বিএফসি বানাবেন তখন আপনি ভুল হয়ে গেছেন। আপনি যা বলতে চাইছেন তা হ'ল ডিফল্ট (দৃশ্যমান) ব্যতীত অন্য কোনও ওভারফ্লো মান এটিকে একটি বিএফসি বানাবে। প্রকৃতপক্ষে, ওভারফ্লো অটোও পুরোপুরি কার্যকরভাবে কাজ করে - আমি যা প্রস্তাব করি তা ঠিক তা না করে (কেবলমাত্র যদি আপনার তুলনামূলকভাবে অবস্থানের উপাদান থাকে যা সম্ভবত সেই ডিভের বাইরে উঁকি দেয়)।
— বিটি
52
এই নিবন্ধটির একটি দুর্দান্ত ব্যাখ্যা রয়েছে: কলিনাআরটস /
— ম্যাক্স ক্যান্টর
1
যদি বিষয়বস্তু ডিভটি উপচে পড়ার পক্ষে যথেষ্ট পরিমাণে হয়?
— জিয়ানিস ক্রিস্টোফাকিস
11
এটি লক্ষণীয় গুরুত্বপূর্ণ, বাচ্চাদের ক্রমটি গুরুত্বপূর্ণ। স্থির প্রস্থ সহ ভাসমান উপাদানটি অন্য একের ওপরে হতে হবে। আমাকে বের করার জন্য খুব দীর্ঘ সময় নিয়েছে, কেন এটি আমার পক্ষে স্যুইচড অর্ডার নিয়ে কাজ করে নি।
— রিপ্লেক্সাস
2
ডেভিড এবং বোরিসের দেওয়া প্রতিক্রিয়ার উপর ভিত্তি করে, সমস্ত কিছুর অ-দৃশ্যমান ওভারফ্লো কেন একটি বিএফসিকে ট্রিগার করে তা ব্যাখ্যা করে আমি একটি উত্তর লিখেছিলাম, যা এখানে পাওয়া যাবে: stackoverflow.com/questions/9943503/… আমার ব্যাখ্যাটি কি সঠিক ছিল?
— BoltClock
104

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

<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/

— বিটি
সূত্র
আমি আপনি কি আবিষ্কৃত জানি না, কিন্তু আপনার কোড সর্বশেষ Chrome এ কাজ করছে না jsfiddle.net/fjb548kw/3
— ইয়েভগেনি Afanasyev
@ ইয়েজেগেনিআফানসিয়েভ আমি "ভাসা: বাম;" সরিয়েছি ইস্যু ঠিক করতে। নোটের জন্য ধন্যবাদ!
— বিটি
ধন্যবাদ. আপনি দয়া করে ব্যাখ্যা করতে পারেন কেন আপনি এর flex-grow: 100;পরিবর্তে আছে flex-grow: 1;?
— ইয়াভেগেনি আফানসিয়েভ
2
@ ইয়েজেগেনিআফানাসেয়েভ এইভাবে করতে আমি পছন্দ করি তা ছাড়া আর কোনও নির্দিষ্ট কারণ নেই। এটি আমাকে পার্সেন্টে ভাবার অনুমতি দেয় তাই যদি আমি flex-grow:10# এ তে সেট করার মতো কিছু করতে পারি এবং তারপরে আমি # বি সেট করি তবে # ক flex-grow: 90লাইনের প্রস্থের 10% এবং # বি রেখার প্রস্থের 90% হবে। যদি অন্য কোনও উপাদানগুলির মধ্যে নমনীয় প্রস্থের স্টাইল না থাকে তবে আপনি যা রাখবেন তা প্রযুক্তিগতভাবে গুরুত্বপূর্ণ নয়।
— বিটি
এটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে, পাশাপাশি একটি ইনপুট এবং বোতাম পাশাপাশি রাখার চেষ্টা করছে যেন তারা এক।
— সৌলেস্তে
28

ফ্লেক্সবক্স সমাধান

এই কি flex-growসম্পত্তি জন্য। 

html, body {
  height: 100%;
}
body {
  display: flex;
}
.second {
  flex-grow: 1;
}
<div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>
স্নিপেট প্রসারিত করুন

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

— রেজি পিঙ্কহাম
সূত্র
27

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

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

যদি কলামগুলির মধ্যে একটির প্রস্থ স্থির করা থাকে তবে এটি কিছুটা শক্ত তবে সম্পূর্ণ কার্যকর।

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

— cletus
সূত্র
11
প্রতিক্রিয়াশীল ডিজাইনে সারণি খুব ভাল হবে না যেখানে আপনি চাইলেও ছোট ডিভাইসে বামদিকে ডান হাতের কলামটি স্লাইড করতে চান।
— এস ..
1
সেখানে টেবিল এর সাথে কাজ করা কিছু প্রতিক্রিয়াশীল নকশা ঠাট আছেন: css-tricks.com/responsive-data-tables
— Rikki
আমি প্রায়শই প্রায়শই দুটি পৃথক বিন্যাস সম্পূর্ণরূপে ডিজাইনের এবং মিডিয়া ক্যোয়ারী ব্যবহার করে একটি মোবাইল পরিবর্তন করতে এবং display:none;স্লাইডিং স্কেলে যতটা সম্ভব 100% প্রতিক্রিয়াশীল করে তুলতে পারি কখনও কখনও এটি মোবাইলের তৈরির জন্য টাচ স্ক্রিন ব্যবহারের জন্য আপনার নকশাকে পুরোপুরি পরিবর্তন করা ভাল n এবং বোতাম শৈলী।
— বাইসান্দার
22

এই সমাধানটি পরীক্ষা করে দেখুন

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}
<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>
স্নিপেট প্রসারিত করুন

— angel.dimitrov
সূত্র
2
এটি সাধারণত একটি উচ্চতর সমাধান কারণ ওভারফ্লো লুকানো সবসময় পছন্দ হয় না।
— জোসেফ
3
প্রতি ওপিতে: "আমি একটি দ্বি-কলামের ডিভ লেআউট চাই, যেখানে প্রত্যেকেরই ভেরিয়েবল প্রস্থ থাকতে পারে"। আপনার উত্তরে, আপনাকে প্রথম কলামটির প্রস্থ জানতে হবে, সুতরাং এটি পরিবর্তনশীল নয়। আপনি পাশাপাশি উভয় কলামে স্থির প্রস্থ সেট করতে পারেন এবং কেবল সেগুলি ভাসিয়ে রাখতে পারেন।
— জ্যাকব আলভারেজ
17

ব্যবহার 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>
স্নিপেট প্রসারিত করুন

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

— জোয়েল মূসা
সূত্র
15

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

<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>
স্নিপেট প্রসারিত করুন

— a6hi5h3k
সূত্র
+1 কারণ আপনার উদাহরণটি কাজ করে বলে মনে হচ্ছে, তবে আমার বাস্তব দৃশ্যে কিছুটা 'ভিউ' থেকে ক্রিপ 'ট্রি' ডিভে পরিণত হয়, যেমন গাছের ডিভ 100% নয়, কিছু জাভাস্ক্রিপ্ট এটিকে ছোট এবং গাছের উচ্চতার পরে বাধ্য করতে পারে আমি সামগ্রীগুলি দেখতে পাই
— অনুরাগ ইউনিয়াল
সেক্ষেত্রে, আপনি যদি বাম কলামটির সর্বাধিক প্রস্থের কথা জানেন তবে আপনি এটিকে একটি শৈলীর সর্বোচ্চ-প্রস্থ (আইই তে কাজ করে না) দিতে পারেন বা মার্জিন-বাম সম্পর্কে চিন্তা করতে পারেন (আই-তে ডাবল-মার্জিন বাগ থেকে সাবধান থাকুন) বা প্যাডিং-বাম।
— a6hi5h3k
এই দুর্দান্ত ছিল! আমি একে এক-অফ সমাধান হিসাবে ইন-লাইনটি ব্যবহার করছি:<div class="clear" style="clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px;"></div>
— আজকে ওয়েস্ট
5

আমি বুঝতে পারছি না যে লোকেরা এত সহজেই সাধারণ কলামার লেআউটগুলির পুরানো ব্যবহার করে খাঁটি সিএসএস সমাধান খুঁজে পেতে এত কঠোর পরিশ্রম করতে ইচ্ছুক TABLE ট্যাগটি

সমস্ত ব্রাউজারগুলিতে এখনও টেবিল বিন্যাস যুক্তি রয়েছে ... সম্ভবত আমাকে ডাইনোসর কল করুন, তবে আমি বলি এটি আপনাকে সহায়তা করুক।

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>
স্নিপেট প্রসারিত করুন

ক্রস ব্রাউজার সামঞ্জস্যের ক্ষেত্রেও খুব কম ঝুঁকিপূর্ণ।

— PatM
সূত্র
2
হ্যাঁ, তবে যদি সব কিছু CSS এর মাধ্যমে করা হচ্ছে তবে এটি কেন নয়, যদি সম্ভব হয় তবে কমপক্ষে একটি কৌতূহল?
— অনুরাগ ইউনিয়াল
2
কারণ আপনি যদি media-queriesউভয় কলামকে ছোট ডিভাইসে একের ওপরে রেখে দিতে চান তবে এটি পুরানো tableট্যাগ দিয়ে অসম্ভব । এই কাজটি পেতে, আপনাকে CSSটেবিল শৈলী প্রয়োগ করতে হবে । সুতরাং, আজকাল CSSআপনি যদি কোনও পর্দার আকারের জন্য একটি প্রতিক্রিয়াশীল বিন্যাস চান তবে এটির সমাধান করা ভাল ।
— এলচিনিনেট
5

অন্যান্য কলামের প্রস্থ যদি স্থির থাকে তবে সমস্ত সাধারণ ব্রাউজারগুলির জন্য কীভাবে calcসিএসএস ফাংশন ব্যবহার করা যায় :

width: calc(100% - 20px) /* 20px being the first column's width */

এইভাবে দ্বিতীয় সারির প্রস্থ গণনা করা হবে (অর্থাত্ অবশিষ্ট প্রস্থ) এবং প্রতিক্রিয়া সহ প্রয়োগ করা হবে।

— anit
সূত্র
এটি হ'ল ফ্লেক্সবক্সের চেয়ে অন্য যে কোনও কিছু ব্যবহার করার পক্ষে সেরা উত্তর, উদাহরণস্বরূপ css-grid,। এছাড়াও position: fixedএটি পুরোপুরি নিখুঁত পছন্দ করে তোলে যা সঙ্গে কাজ করে ! ধন্যবাদ!
— বারটেকাস
3 

<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="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
  </div>

</body>

</html>
স্নিপেট প্রসারিত করুন

— উ: প্রমোদ কুমার
সূত্র
আমি বামদিকে স্থিত আইটেম, ডানদিকে স্থির আইটেম এবং একটি বার্তা লাইন যা বাম ওভার স্পেস ব্যবহার করে সেগুলির সাথে স্ট্যাটাস বারের মতো কিছু চাই। আমি এই উত্তরটি দিয়ে শুরু করেছি এবং আমার বার্তাটি বিভাগের সাথে ভাসমানের পরে যুক্ত করেছি: উচ্চতা: 20px; সাদা-স্থান: এখনই; যথোপযুক্ত সৃষ্টিকর্তাযথোপযুক্ত সৃষ্টিকর্তা; পাঠ্য-ওভারফ্লো: ক্লিপ
— ইংলবার্ট
3

আপনি সিএসএস গ্রিড লেআউট চেষ্টা করতে পারেন ।

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}
<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>
স্নিপেট প্রসারিত করুন

— অনুশাসন
সূত্র
2

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

যদি সমস্ত আইটেমের ফ্লেক্স-গ্রোথ 1 তে সেট থাকে তবে ধারক বাকী স্থানটি সমস্ত বাচ্চাদের সমানভাবে বিতরণ করা হবে। যদি বাচ্চাদের একটির মান 2 হয় তবে অবশিষ্ট স্থানটি অন্যের চেয়ে দ্বিগুণ স্থান গ্রহণ করে (বা এটি চেষ্টা করবে, কমপক্ষে)। আরও এখানে দেখুন

.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>
স্নিপেট প্রসারিত করুন

— স্ট্যানিস্লাভ ওস্তাপেঙ্কো
সূত্র
1

কিছুটা আলাদা বাস্তবায়ন,

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

জেএসফিডাল: http://jsfiddle.net/qLTMf/1722/

— রাও
সূত্র
1

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

.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>
স্নিপেট প্রসারিত করুন

— johnmanoahs
সূত্র
2
CSS শ্রেণীর জন্য কোনও এইচটিএমএল রেফারেন্স নেই .আইপি এবং এটি আই 7
— কেথ কে
1

আপনি ডাব্লু 3 এর সিএসএস লাইব্রেরি ব্যবহার করতে পারেন যার মধ্যে একটি ক্লাস রয়েছে 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">

এখানে সরকারী ডেমো: ডাব্লু 3 স্কুল ট্রাইটি সম্পাদক Editor

— মানার
সূত্র
দেখে মনে হচ্ছে এটি "ওভারফ্লো: লুকানো" যুক্ত করেছে, যা এটি ইতিমধ্যে দেওয়া উত্তরের আরও খারাপ সংস্করণ হিসাবে তৈরি করে
— vpzomtrrfrt
0

আপনি যে উত্তরটি প্রত্যাশা করছেন তা যদি এটি হয় তবে আমি নিশ্চিত নই তবে আপনি কেন গাছের প্রস্থকে 'স্বয়ং' এবং 'দেখুন' এর প্রস্থটি 100% এ সেট করবেন না?

3
কারণ এটি দ্বিতীয় ভাসমানটিকে প্রথমের নীচে রাখবে কারণ এটি খুব প্রশস্ত।
— ক্লিটাস
0

উপলব্ধ সিএসএস লেআউট ফ্রেমওয়ার্কগুলি একবার দেখুন। আমি সিম্পলকে সুপারিশ করব বা আরও কিছুটা জটিল ব্লুপ্রিন্ট কাঠামোর ।

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

<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 এক জন্য।

এটা খুব সহজ।

উভয় কলামের পরিবর্তনশীল প্রস্থ হবে?
— অনুরাগ ইউনিয়াল
0

সিম্পল সিএসএস প্লাগের জন্য ধন্যবাদ!

আপনার সমস্ত কলামগুলি তেমনভাবে মোড়ানো মনে রাখবেন ColumnWrapper।

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

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

— রোমশ
সূত্র
0

আমি একটি জাভাস্ক্রিপ্ট ফাংশন লিখেছি যা আমি jQuery call (ডকুমেন্ট) .ডিডি () থেকে কল করি। এটি পিতামাতার ডিভের সমস্ত শিশুকে বিশ্লেষণ করবে এবং কেবলমাত্র সবচেয়ে সঠিক সন্তানের আপডেট করবে।

এইচটিএমএল

...
<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"));
            }
        });
    });
}
— bcr666
সূত্র
0

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

আমি ফ্লেক্সবক্স ব্যবহার করে লেআউটগুলি বুঝতে এবং ডিজাইনের জন্য একটি নিখরচায় সরঞ্জাম তৈরি করেছি। এটি এখানে দেখুন: http://algid.com / ফ্লেক্স- ডিজাইনার

.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>
স্নিপেট প্রসারিত করুন

— মারিও ভেজকেজ
সূত্র
আপনি নিজের যুক্ত করার আগে সমস্ত পূর্ববর্তী উত্তরগুলি পড়েছিলেন? মনে হচ্ছে না ...
— তেমনী আফিফ
পার্শ্ব নোট হিসাবে, আপনাকে যুক্ত করার দরকার নেই stretchকারণ এটি ডিফল্ট মান এবং শিশু উপাদানকে ফ্লেক্স ধারক করার প্রয়োজন নেই যাতে display:flexঅভ্যন্তরীণ উপাদানগুলির পক্ষে অকেজো
— তেমানি আফিফ
অবাক হলাম কেন ডাউনটা, কোন মন্তব্য ছাড়াই। এই উত্তর কি প্রশ্নের জবাব দিচ্ছে না? কেন? অন্যকে সাহায্য করার চেষ্টা করা হলে শাস্তি দেওয়া হয়েছে আমি আমার পরবর্তী উত্তরের আগে দু'বার
— ভাবব
1
ডাউনটোটের পরে আপনি দুটি মন্তব্য পেয়েছেন, এটি যথেষ্ট নয়?
— তেমনী আফিফ
তেমারি, আপনি কি আমার সরঞ্জামটি পরীক্ষা করে দেখেছেন? আপনি কি দরকারী বলে মনে করেন না এবং অন্যকে সাহায্য করতে পারেন? আপনি কি মনে করেন যে প্রশ্নের সাথে সম্পর্কিত নয়? এই প্রশ্নের আপনার উত্তর কোথায়? আমি এটা দেখতে পাচ্ছি না। এখানে আপনার ভূমিকা কি?
— মারিও ভেজকেজ
-3

যদি উভয় প্রস্থের পরিবর্তনশীল দৈর্ঘ্য হয় তবে আপনি কিছু স্ক্রিপ্টিং বা সার্ভার পাশ দিয়ে প্রস্থটি গণনা করেন না কেন?

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>
— amischiefr
সূত্র
3
সার্ভার কীভাবে জানতে পারে যে ক্লায়েন্টের লেআউট ইঞ্জিন কীভাবে কাজ করবে?
— কেভ
সরল: এটি 90% ব্রাউজারের জন্য এটি বিকাশ করুন :) আই 7+, এফএফ 3 + এবং সাফারি সিএসএস 3 সমর্থন করে You এছাড়াও আপনি স্ট্যান্ডার্ড আই 6 <<! - [আইটি 6 ই lte]> উপাদানও অন্তর্ভুক্ত করতে পারেন। যাইহোক, কোন ব্রাউজার স্টাইল = "প্রস্থ:%" সমর্থন করে না?
— amischiefr
সার্ভারের পাশ দিয়ে এটি কীভাবে করা যায় তা আমি জানি না, তবে হ্যাঁ কিছু জাভাস্ক্রিপ্ট এটি করতে পারে তবে সিএসএস / এইচটিএমএল এটি না করতে পারলে আমি এড়াতে চাই
— অনুরাগ ইউনিিয়াল
যা এটি পারে না। অতএব, আপনি যদি উভয়ই গতিশীল হতে চান তবে আপনাকে এটি কোনও স্ক্রিপ্ট বা সার্ভারের পাশেই করতে হবে।
— amischiefr
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.