ডিভগুলির মধ্যে স্থান - প্রদর্শন টেবিল-ঘর

Question

আমার এখানে দুটি ডিভ রয়েছে:

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

এই দুটি ডিভ (যেটি আছে display:table-cell) এর মধ্যে স্থান তৈরি করার কোনও উপায় আছে ?

Answer 1

আপনি border-spacingসম্পত্তি ব্যবহার করতে পারেন :

এইচটিএমএল:

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

সিএসএস:

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

জেএসবিন ডেমো

অন্য কোন বিকল্প?

ভাল , আসলে না।

কেন?

• marginসম্পত্তি উপাদানগুলির জন্য প্রযোজ্য নয়display: table-cell ।
• padding সম্পত্তি ঘরগুলির প্রান্তের মধ্যে স্থান তৈরি করে না।
• floatসম্পত্তি তাদের table-cellমৌলিক উপাদানগুলির মতো লম্বা হতে সক্ষম এমন উপাদানগুলির প্রত্যাশিত আচরণকে নষ্ট করে ।

Comments

অন্য কোন বিকল্প? অবশ্যই position: relative,।

— জঙ্গোসি

@Jongosi মতে বৈশিষ্ট : প্রভাব position: relativeউপর table-*-group, table-row, table-column, table-cell, এবং table-captionউপাদানের undefined করা হয়।

— হাশেম কুলামি

আপনি পটভূমির মতো একই রঙের একতরফা সীমানাও তৈরি করতে পারেন। border-right: 10px solid #FFF। সিএসএস ড্রপডাউন মেনু ডিজাইন করার সময় এটি আমার পক্ষে ভাল কাজ করেছে যখন আমি table-cellউপাদানগুলির মধ্যে কিছু জায়গা চাই ।

— আর্মাডাড্রাইভ

স্পেসিংয়ের জন্য আপনি বিশুদ্ধরূপে ঘরগুলিও যুক্ত করতে পারেন। আদর্শ নয়, তবে অন্ততপক্ষে আপনি সর্বনিম্ন কক্ষে সীমানা-ফাঁক বন্ধ করার চেষ্টা করার মাথা ব্যথা এড়াতে পারেন।

— ড্যানিয়েল

আমি "প্যাডিং" "সেল" এর কেবল 1 প্রান্তে থাকতে চেয়েছিলাম, সুতরাং আমি স্বচ্ছ সীমানার জন্য একটি আরজিবা (0,0,0,0) এর একটি সীমানা রঙ ব্যবহার না করে আর্মাদাদ্রাইভের সমাধানটি ব্যবহার করতে হয়েছিল তাই আমি পটভূমির রঙ / চিত্র সম্পর্কে চিন্তা করার দরকার নেই। সীমান্ত-ডান: 10px কঠিন rgba (0,0,0,0);

— JAX

Answer 2

সম্ভব হলে স্বচ্ছ সীমানা ব্যবহার করুন।

জেএসফিডাল ডেমো

https://jsfiddle.net/74q3na62/

এইচটিএমএল

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
</div>

সিএসএস

.table {
  display: table;
  border: 1px solid black;
}

.row { display:table-row; }

.cell {
  display: table-cell;
  background-clip: padding-box;
  background-color: gold;
  border-right: 10px solid transparent;
}

.cell:last-child {
  border-right: 0 none;
}

ব্যাখ্যা

border-spacingগৃহীত উত্তর অনুসারে আপনি সম্পত্তিটি ব্যবহার করতে পারেন , তবে এটি কেবল টেবিলের ঘরগুলির মধ্যেই নয় টেবিলের ঘর এবং টেবিলের ধারকগুলির মধ্যেও স্থান তৈরি করে। এটি অযাচিত হতে পারে।

যদি আপনার টেবিল কোষগুলিতে দৃশ্যমান সীমানাগুলি আপনার প্রয়োজন না হয় তাই transparentআপনার জন্য সেল মার্জিন উত্পন্ন করতে সীমানা ব্যবহার করা উচিত । স্বচ্ছ সীমানাগুলি সেটিংয়ের প্রয়োজন background-clip: padding-box;কারণ অন্যথায় সারণীতে সারণীর ঘরগুলির পটভূমি রঙ প্রদর্শিত হয়।

স্বচ্ছ সীমানা এবং পটভূমি-ক্লিপ IE9 উপরের দিকে (এবং অন্যান্য সমস্ত আধুনিক ব্রাউজারগুলি) সমর্থিত। আপনার যদি IE8 সামঞ্জস্যের প্রয়োজন হয় বা প্রকৃত স্বচ্ছ স্থানের প্রয়োজন না হয় তবে আপনি কেবল একটি সাদা সীমানার রঙ সেট করতে পারেন এবং background-clipবাদ দিতে পারেন।

Comments

'সীমান্ত-ডান' সেটিংসের মধ্যে স্থান সরবরাহের জন্য যথেষ্ট পর্যাপ্ত, কোনও "সারণী" ঘোষণা করার প্রয়োজন নেই।

— forsberg

Answer 3

<div style="display:table;width:100%"  >
<div style="display:table-cell;width:49%" id="div1">
content
</div>

<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->

<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>

Answer 4

ঠিক আছে, উপরেরটি কাজ করে, আমার সমাধানটি এখানে একটু কম মার্কআপ প্রয়োজন এবং আরও নমনীয়।

.cells {
  display: inline-block;
  float: left;
  padding: 1px;
}
.cells>.content {
  background: #EEE;
  display: table-cell;
  float: left;
  padding: 3px;
  vertical-align: middle;
}

<div id="div1" class="cells"><div class="content">My Cell 1</div></div>
<div id="div2" class="cells"><div class="content">My Cell 2</div></div>

Answer 5

যে কোনও নামের সাথে আমি একটি নতুন ডিভ তৈরি করুন (আমি কেবল টেবিল-বিভক্ত ব্যবহার করব) এবং এতে সামগ্রী যুক্ত না করে এটিকে প্রস্থ দিন, যখন এটি পৃথক করা দরকার।

আপনার প্রয়োজনীয় প্রস্থটি যা যুক্ত করতে পারেন। আমি মাত্র 0.6% ব্যবহার করেছি কারণ আমার যখন এটি করতে হয়েছিল তখন এটিই আমার প্রয়োজন ছিল।

.table-split {
  display: table-cell;
  width: 0.6%
}

<div class="table-split"></div>

Comments

এটি একটি ভয়ানক সমাধান।

এটি একটি সাধারণ কৌশল ছিল যখন প্রকৃত টেবিল উপাদানগুলি বিন্যাসের উদ্দেশ্যে ব্যবহৃত হত এবং পদ্ধতিটি এখন অপ্রচলিত হওয়ার কারণ।

— রাকিটিন

যেহেতু এটি কেবল সিএসএস

— দিয়েই