কীভাবে একটি ইনলাইন-ব্লক উপাদান লাইনের বাকী অংশ পূরণ করবে?

186

কোনও টেবিল ব্যবহার না করে সিএসএস এবং দুটি ইনলাইন-ব্লক (বা যাই হোক না কেন) ডিআইভি ট্যাগ ব্যবহার করে কি এ জাতীয় জিনিস সম্ভব?

সারণী সংস্করণটি এটি (সীমানা যুক্ত করা যাতে আপনি এটি দেখতে পারেন):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>

এটা একটা সঙ্গে একটি বাম কলামে উত্পাদন করে নির্দিষ্ট প্রস্থ (একটি শতাংশ প্রস্থ), এবং একটি ডান কলামের যে বিস্তৃতি পূরণ করতে অবশিষ্ট স্থান লাইনে। বেশ সহজ লাগছে, তাইনা? তদতিরিক্ত, যেহেতু কিছুই "ভাসমান" নয়, তাই পিতামাতার ধারকটির উচ্চতা যথাযথভাবে প্রসারিত সামগ্রীর উচ্চতাকে বাড়িয়ে তোলে।

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

আমি "ইনলাইন-ব্লক" এবং "হোয়াইট-স্পেস: নওর্যাপ;" ব্যবহার করার চেষ্টা করেছি, তবে সমস্যাটি হ'ল আমি লাইনের অবশিষ্ট স্থানটি পূরণ করার জন্য ২ য় উপাদান পেতে পারি না । প্রস্থকে "প্রস্থ: 100% - (বামফাঁদাম প্রস্থ) px" এর মতো কিছুতে সেট করা কিছু ক্ষেত্রে কাজ করবে, তবে প্রস্থের সম্পত্তিতে একটি গণনা করা সত্যিই সমর্থিত নয়।

css layout fixed-width

— Triynko
সূত্র

1

আমি মনে করি না যে এটির কোনও display: table-*কাজকে কনস্ট্রাক্টে পরিণত করা ব্যতীত এটি করার কোনও বুদ্ধিমান উপায় আছে তবে সত্যিকার অর্থেই "বেশি সার্থক" হয় না ( divস্যুপের একটি ভয়ঙ্কর ঘটনা হওয়ায় ) এবং আইআই 6 এর সামঞ্জস্যতা ভঙ্গ করে। আমি ব্যক্তিগতভাবে এই <table>ব্যক্তির সাথে লেগে থাকব , যদি না কেউ যদি কোনও জিনিয়াস সাধারণ ধারণা নিয়ে আসে যা পরিচালনা করে না

— পেক্কা

51

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

— ট্রায়ঙ্কো

4

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

— ট্রায়ঙ্কো

যদি আপনার পিতামাতার ধারকটিতে কমপক্ষে একটি অ-ভাসমান উপাদান পেয়ে থাকেন তবে এটি ভাসমান সাফ করা সত্যিই "হ্যাক" নয়, এখন তাই না? মনে রাখবেন যে মুদ্রণের ক্ষেত্রে সিএসএসের শেকড় রয়েছে - আপনি কেন স্বয়ংক্রিয়-সাফাই না পাচ্ছেন সে সম্পর্কে ভাল আলোচনার জন্য CSS-tricks.com/containers-dont-clear-floats দেখুন ।

— চৌলেট

3

@ ত্রিনকো: আমি এটি আগে তৈরি করেছি: jsfiddle.net/thirtydot/qx32C - আমার ধারণা এটি আপনার বেশিরভাগ পয়েন্টকে আঘাত করে। আমি যে ডেমোটি করেছি তার সমালোচনা শুনব এবং পরে এটি ঠিক করার চেষ্টা করব।

— ত্রিশডট

169

দেখুন: http://jsfiddle.net/qx32C/36/

.lineContainer {
    overflow: hidden; /* clear the float */
    border: 1px solid #000
}
.lineContainer div {
    height: 20px
} 
.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.right {
    overflow: hidden;
    background: #ccc
}

<div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

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

আমি কেন প্রতিস্থাপন হয়নি margin-left: 100pxসঙ্গে overflow: hiddenউপর .right?

সম্পাদনা: উপরের (মৃত) লিঙ্কটির জন্য এখানে দুটি আয়না দেওয়া হয়েছে:

— thirtydot
সূত্র

60

আপনি যদি নিজেকে ওয়েব বিকাশকারী হিসাবে অভিহিত করেন তবে আপনাকে সেই লিঙ্কটি ক্লিক করতে হবে। আমি করেছি, এবং আমি ঠিক জাদুর মতো ম্যাজিক কার্পেটের রাইডে অনুভব করেছি।

— ক্রিস

2

@ ক্রিশআউটস, এটি বর্ণনা করার সম্ভবত এটিই সেরা উপায়। এই পদ্ধতিটি কেবল কোনও অর্থহীন নয়, তবে তারপরে আবার ... এমন কোনও কিছুর জন্য একটি দুর্দান্ত কাজ যা আপনার স্পষ্টভাবে করতে সক্ষম হবেন।

— mjvotaw

14

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

— ট্রায়ঙ্কো

3

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

— CpnCrunch

1

@RMorrisey: সম্ভবত শুধু কিছু দরকার box-sizing: border-boxউপর divগুলি। কেবল অনুমান, যেহেতু আপনি যে আচরণটি বর্ণনা করেছেন তাতে কোনও ডেমো সরবরাহ করেন নি। হচ্ছে বলেন, ভিত্তিক সমাধান সাধারণত উত্তম । এটি খুব পুরানো প্রশ্ন, তবে আমি মনে করি ওপির আচরণের কারণে আমি এই প্রশ্নের টেবিলগুলির সাথে কিছু করার চেষ্টা করছিলাম। display: table

— ত্রিশডট

64

ফ্লেক্সবক্স ব্যবহার করে একটি আধুনিক সমাধান:

.container {
    display: flex;
}
.container > div {
    border: 1px solid black;
    height: 10px;
}

.left {
   width: 100px;
}

.right {
    width: 100%;
    background-color:#ddd;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

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

http://jsfiddle.net/m5Xz2/100/

— পানু হরসমালাহতি
সূত্র

4

ফ্লেক্স এবং প্রস্থ 100% প্রদর্শন করুন .. মনে রাখতে হবে

— dreamerkumar

9

ফ্লেক্স ব্যবহার flex: 1করার সময়, পরিবর্তে ব্যবহার করবেন না কেন width: 100%?

— ইতাই বার-হাইম

নতুন তাদের জন্য flexbox : flex: 1জন্য সাধারণভাবে সংক্ষেপে হয় flex-grow: 1। এটা তোলে সংমিশ্রণ অ্যাট্রিবিউট আছে: flex: <grow> <shrink> <basis>।

— টানিয়াস

1

কেবলমাত্র একটি দ্রষ্টব্য নোট যা প্রদর্শিত হয়েছে: আইলে <11 এ ফ্লেক্সটি অসমর্থিত এবং 11-তে খুব বগি হয়

— এরিক শিল্ডস

1

@ এরিকশিল্ডস এটিকে কারও ফ্লেক্সবক্স ব্যবহার থেকে বিরত রাখা উচিত নয়। আজকাল আমরা flexbugsআপনাকে জানি।

— নিউরোট্রান্সমিটার

47

সাধারণ আধুনিক ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ (IE 8+): http://jsfiddle.net/m5Xz2/3/

.lineContainer {
    display:table;
    border-collapse:collapse;
    width:100%;
}
.lineContainer div {
    display:table-cell;
    border:1px solid black;
    height:10px;
}
.left {
    width:100px;
}

 <div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

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

— ফ্রস্টি জেড
সূত্র

9

সারণী ব্যবহারের বিরুদ্ধে তর্কটির উপস্থাপনা বৈশিষ্ট্যগুলির সাথে কোনও সম্পর্ক নেই। এটি নিয়ন্ত্রণহীন মার্কআপ, স্টাইল / ডকুমেন্ট মুডলিং, এবং অনুপযুক্ত শব্দার্থবিজ্ঞানের সাথে করতে হবে। এই যুক্তিগুলির কোনওটির জন্যই প্রযোজ্য নয় display:table।

— ধনী রিমার

এটি কীভাবে inline-blockলাইনের বাকী অংশগুলি পূরণ করতে পারে তার উত্তর দেয় না ।

— নিউরোট্রান্সমিটার

1

@ ট্রান্সলুসেন্টক্লাউড আমি সম্মত হই যে আমার উত্তরটি প্রশ্নের শিরোনামের সঠিক উত্তর দেয় না, তবে প্রশ্ন সংস্থায় জিজ্ঞাসা করা হয়েছে এটি ডিভগুলি ব্যবহার করে উপলব্ধ প্রস্থটি পূরণ করার একটি উপায় সরবরাহ করে।

— ফ্রস্টি জেড

1

আমি এই সমাধানটি অনেক পছন্দ করি। আপনি এমন কিছু অদ্ভুত স্টাইলিং ব্যবহার করতে বাধ্য হচ্ছেন না যা লুকানো সিএসএস যুক্তি থেকে প্রকাশিত হয় (যেমন ওভারফ্লো লুকিয়ে রাখার জন্য)।

— বিশ্রামের

4

আপনি প্রদর্শন সহ তরল উপাদানটিতে ক্যালক (100% - 100px) ব্যবহার করতে পারেন: উভয় উপাদানের জন্য ইনলাইন-ব্লক।

ট্যাগগুলির মধ্যে কোনও স্থান থাকা উচিত না সে বিষয়ে সচেতন হন, অন্যথায় আপনাকে আপনার ক্যালকের মধ্যেও সেই স্থানটি বিবেচনা করতে হবে।

.left{
    display:inline-block;
    width:100px;
}
.right{
    display:inline-block;
    width:calc(100% - 100px);
}


<div class=“left”></div><div class=“right”></div>

দ্রুত উদাহরণ: http://jsfiddle.net/dw689mt4/1/

— SuperIRis
সূত্র

1

আমি flex-growএই লক্ষ্য অর্জনের জন্য সম্পত্তি ব্যবহার করেছি । আপনাকে display: flexপ্যারেন্ট কনটেইনার জন্য সেট করতে হবে, তারপরে আপনার flex-grow: 1যে ব্লকটি অবশিষ্ট স্থান পূরণ করতে চান, বা মন্তব্যে উল্লিখিত ট্যানিয়াসflex: 1 হিসাবে সেট করতে হবে।

— ভ্লাদিস্লাভ কোভেসেঙ্কভ
সূত্র

0

আপনি যদি ব্যবহার করতে না পারেন overflow: hidden(কারণ আপনি চান না overflow: hidden) বা আপনি যদি সিএসএস হ্যাক / ওয়ার্কারআউন্ডগুলি অপছন্দ করেন তবে আপনি এর পরিবর্তে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। মনে রাখবেন যে এটি জাভাস্ক্রিপ্টের কারণে কার্যকর নাও হতে পারে।

var parent = document.getElementsByClassName("lineContainer")[0];
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
window.onresize = function() {
  right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
}

.lineContainer {
  width: 100% border: 1px solid #000;
  font-size: 0px;
  /* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */
}

.lineContainer div {
  height: 10px;
  display: inline-block;
}

.left {
  width: 100px;
  background: red
}

.right {
  background: blue
}

<div class="lineContainer">
  <div class="left"></div>
  <div class="right"></div>
</div>

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

http://jsfiddle.net/ys2eogxm/

— নিক ম্যানিং
সূত্র

0

যখন আপনি ইনলাইন ব্লকগুলি ছেড়ে দেন

.post-container {
    border: 5px solid #333;
    overflow:auto;
}
.post-thumb {
    float: left;
    display:block;
    background:#ccc;
    width:200px;
    height:200px;
}
.post-content{
    display:block;
    overflow:hidden;
}

http://jsfiddle.net/RXrvZ/3731/

( সিএসএস ফ্লোট থেকে : পাঠ্যের বামে একটি চিত্র ভাসমান )

— Fanky
সূত্র