দুটি ইনলাইন-ব্লক উপাদান, প্রতিটি 50% প্রশস্ত, একক সারিতে পাশাপাশি পাশাপাশি মানায় না

Question 1

<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

জেএসফিডাল: http://jsfiddle.net/5EcPK/

উপরের কোডটি একক সারিতে # বাম ডিভ এবং # টি ডান পাশে পাশাপাশি রাখার চেষ্টা করছে। তবে আপনি উপরের জেএসফিডাল ইউআরএলটিতে দেখতে পাচ্ছেন, এটি কেস নয়।

আমি একটি ডিভের প্রস্থকে 49% এ হ্রাস করে সমস্যার সমাধান করতে সক্ষম হয়েছি। Http://jsfiddle.net/mUKSC/ দেখুন । তবে এটি একটি আদর্শ সমাধান নয় কারণ দুটি ডিভের মধ্যে একটি ছোট ফাঁক উপস্থিত হয়।

সমস্যাটি সমাধান করতে সক্ষম হবার আরেকটি উপায় হ'ল উভয় ডিভিডি ভাসিয়ে। Http://jsfiddle.net/VptQm/ দেখুন । এটি কাজ করে।

তবে আমার মূল প্রশ্নটি রয়ে গেছে। উভয় ডিভগুলিকে যখন ইনলাইন-ব্লক উপাদান হিসাবে রাখা হয় তখন কেন তারা পাশাপাশি বসে না?

Question 2

inline-blockউপাদানগুলি ব্যবহার করার সময় , whitespace সেই উপাদানগুলির মধ্যে সর্বদা একটি সমস্যা থাকবে (সেই স্থানটি প্রায় 4px প্রশস্ত)।

সুতরাং, আপনার দুটি divs, যার উভয়ই 50% প্রস্থ রয়েছে, এবং এটি whitespace(p 4px) প্রস্থে 100% এর বেশি এবং তাই এটি ভেঙে যায়। আপনার সমস্যার উদাহরণ:

কোড স্নিপেট দেখান

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

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

এটি ঠিক করার কয়েকটি উপায় রয়েছে:

1. এই উপাদানগুলির মধ্যে কোনও স্থান নেই

কোড স্নিপেট দেখান

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><div class="right">bar</div>

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

2. এইচটিএমএল মন্তব্য ব্যবহার করে

কোড স্নিপেট দেখান

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><!--
--><div class="right">bar</div>

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

3. বাবা সেট font-sizeকরতে 0, এবং তারপর কিছু মান যোগ inline-blockউপাদান

কোড স্নিপেট দেখান

body{
  margin: 0; /* removing the default body margin */
}

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="parent">
  <div class="left">foo</div>
  <div class="right">bar</div>
</div>

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

৪. তাদের মধ্যে নেতিবাচক মার্জিন ব্যবহার করা ( পছন্দনীয় নয় )

কোড স্নিপেট দেখান

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

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

5. সমাপ্তি কোণ ছেড়েছে

কোড স্নিপেট দেখান

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div
><div class="right">bar</div>

<hr>

<div class="left">foo</div><div class="right">
bar</div>

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

6. স্কিপিং নির্দিষ্ট এইচটিএমএল ক্লোজিং ট্যাগ (ধন্যবাদ @thirtydot রেফারেন্স )

কোড স্নিপেট দেখান

body{
  margin: 0; /* removing the default body margin */
}

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

li{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

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

তথ্যসূত্র:

হিসাবে @ MarcosPérezGude বলেন , সেরা উপায় ব্যবহার করা rem, এবং কিছু ডিফল্ট মান যোগ font-sizeউপর html(মত ট্যাগ HTML5Boilerplate )। উদাহরণ:

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

আপডেট : এটি প্রায় 2018 এর মতো, ফ্লেক্সবক্স বা আরও ভাল ব্যবহার করুন - সিএসএস গ্রিড লেআউট ।

Question 3

CSS3 এ ভাল উত্তরটি হ'ল:

white-space: nowrap;

প্যারেন্ট নোডে এবং:

white-space: normal;
vertical-align: top;

50% এ ডিভ (বা অন্যান্য) এ

উদাহরণ: http://jsfiddle.net/YpTMh/19/

সম্পাদনা:

এর সাথে আরও একটি উপায় রয়েছে:

font-size: 0;

প্যারেন্ট নোডের জন্য এবং চাইল্ড নোডে ওভাররাইড করুন

Question 4

এটি কারণ আপনার দুটি ডিভের মধ্যবর্তী সাদা স্থানটিকে স্থান হিসাবে ব্যাখ্যা করা হচ্ছে। যদি আপনি <div>নীচের মত আপনার ট্যাগগুলিকে লাইনে রেখে দেন সমস্যাটি সংশোধন করা হচ্ছে :

<div id="left"></div><div id="right"></div>

Question 5

কারণ উপাদানগুলির মধ্যে একটি স্থান রয়েছে। আপনি যদি সমস্ত সাদা জায়গা সরিয়ে ফেলেন তবে সেগুলি খাপ খায় ।

<div id="left">Left</div><div id="right">Right</div>

Question 6

হয় এগুলি ইনলাইন-ব্লকের পরিবর্তে ব্লক করুন। এটি তাদের মধ্যে ফাঁকা স্থান উপেক্ষা করে ডিভেন্ড সরবরাহ করবে।

display:block;

অথবা ট্যাগের মধ্যে স্থান সরিয়ে ফেলুন

<div id='left'></div><div id='right'></div>

বা যোগ করুন

margin: -1en;

একক স্থান দ্বারা রেন্ডার করা স্থান প্রশমিত করার জন্য ডিভগুলির মধ্যে একটিতে।

Question 7

নীচে কোড চেক করুন:

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}

<div id="left">Left</div>
<div id="right">Right</div>

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

Question 8

ফ্লেক্সবক্স উদাহরণ - এটি অভিভাবক শ্রেণীর জন্য ব্যবহৃত হবে পাশাপাশি দুটি উপাদান পাশাপাশি রয়েছে holding

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

উল্লম্বভাবে অন্য ডিভের অভ্যন্তরে একটি ডিভকে কেন্দ্র করে নেওয়া হয়েছে aken

Question 9

এটি সিএসএস প্রদর্শন যোগ করে করা যায়: ডিভের সাথে ইনলাইন যা ইনলাইন উপাদানগুলিকে ধারণ করে।

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

সুতরাং প্রদর্শনটি ব্যবহার করা আরও নিরাপদ হবে: ইনলাইন;

Question 10

যোগ ভাসা: বাম; উভয় ডিভি ট্যাগ।

div {
  float: left;
}

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