সিএসএস ব্যবহার করে ডিভকে 2 টি কলামে বিভক্ত করুন

Question 1

আমি সিএসএস ব্যবহার করে একটি ডিভকে দুটি কলামে বিভক্ত করার চেষ্টা করছি, তবে এখনও এটি কাজ করতে সক্ষম হইনি। আমার প্রাথমিক কাঠামোটি নিম্নরূপ:

<div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

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

কোন সাহায্যের জন্য ধন্যবাদ!

Question 2

আপনি যখন এই দুটি ডিভগুলি ভাসাবেন তখন সামগ্রী ডিভটি শূন্যের উচ্চতায় নেমে আসে। শুধু যোগ কর

<br style="clear:both;"/>

# ডাইভ ডিভের পরে কিন্তু কনটেন্ট ডিভের ভিতরে। এটি কনটেন্ট ডিভকে দুটি অভ্যন্তরীণ, ভাসমান ডিভগুলি ঘিরতে বাধ্য করবে।

Question 3

এটি আমার পক্ষে ভাল কাজ করে। আমি স্ক্রিনটিকে দুটি অর্ধে বিভক্ত করেছি: 20% এবং 80%:

<div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>

Question 4

এটি করার আরেকটি উপায় হ'ল overflow:hidden;ভাসমান উপাদানগুলির মূল উপাদান যুক্ত করা।

ওভারফ্লো: লুকানো উপাদানটি ভাসমান উপাদানের সাথে মানানসই করে তুলবে।

এইভাবে, এটি অন্য কোনও এইচটিএমএল উপাদান যুক্ত করার পরিবর্তে CSS এ করা যেতে পারে।

Question 5

এটি করার সবচেয়ে নমনীয় উপায়:

#content::after {
  display:block;
  content:"";
  clear:both;
}

এটি # কনটেমেটে উপাদান যুক্ত করার মতোই কাজ করে:

<br style="clear:both;"/>

কিন্তু আসলে একটি উপাদান যোগ না করে। :: পরে সিউডো উপাদান বলা হয়। এটি overflow:hidden;# বিষয়বস্তুতে যুক্ত করার চেয়ে ভাল কারণ হ'ল আপনার নিখুঁত অবস্থানযুক্ত শিশু উপাদানগুলি ওভারফ্লো হতে পারে এবং এখনও দৃশ্যমান হতে পারে। এছাড়াও এটি বাক্স-ছায়াটিকে এখনও দৃশ্যমান হতে দেবে।

Question 6

প্রদত্ত উত্তরের কোনওটিই মূল প্রশ্নের উত্তর দেয় না।

প্রশ্নটি কীভাবে CSS ব্যবহার করে একটি ডিভকে 2 টি কলামে আলাদা করা যায়।

উপরের সমস্ত উত্তর 2 টি কলামের অনুকরণ করার জন্য 2 টি ভাগকে একটি একক ডিভের মধ্যে এম্বেড করে। এটি একটি খারাপ ধারণা কারণ আপনি কোনও গতিশীল ফ্যাশনে 2 টি কলামে সামগ্রী প্রবাহিত করতে পারবেন না।

সুতরাং, উপরের পরিবর্তে সিএসএস ব্যবহার করে 2 টি কলাম ধারণ করতে সংজ্ঞায়িত এমন একক ডিভ ব্যবহার করুন ...

.two-column-div {
 column-count: 2;
}

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

Question 7

যে কারণেই আমি ক্লিয়ারিং পন্থাগুলি কখনই পছন্দ করি না, আমি এর মতো জিনিসের জন্য ভাসমান এবং শতাংশের প্রশস্ততার উপর নির্ভর করি।

এখানে এমন কিছু বিষয় যা সাধারণ ক্ষেত্রে কাজ করে:

#content { 
  overflow:auto; 
  width: 600px; 
  background: gray; 
} 

#left, #right { 
  width: 40%; 
  margin:5px; 
  padding: 1em; 
  background: white; 
} 

#left  { float:left;  }
#right { float:right; }

আপনি যদি কিছু বিষয়বস্তু রাখেন তবে আপনি দেখতে পাবেন যে এটি কাজ করে:

<div id="content">
  <div id="left">
     <div id="object1">some stuff</div>
     <div id="object2">some more stuff</div>
  </div>

  <div id="right">
     <div id="object3">unas cosas</div>
     <div id="object4">mas cosas para ti</div>
  </div>
</div>

আপনি এটি এখানে দেখতে পারেন: http://cssdesk.com/d64uy

Question 8

বাচ্চাদের ডিভগুলি করুন inline-blockএবং তারা পাশাপাশি থাকবেন:

#content {
   width: 500px;
   height: 500px;
}

#left, #right {
    display: inline-block;
    width: 45%;
    height: 100%;
}

ডেমো দেখুন

Question 9

আমি জানি এই পোস্টটি পুরানো, তবে আপনার যদি এখনও কেউ একটি সহজ সমাধান খুঁজছেন।

#container .left,
#container .right {
    display: inline-block;
}

#container .left {
    width: 20%;
    float: left;
}
#container .right {
    width: 80%;
    float: right;
}

Question 10

উল্লম্বভাবে একটি ডিভ ভাগ করার সর্বোত্তম উপায় -

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}

Question 11

আপনার ডিভ উপাদানটির বিন্যাস নিয়ন্ত্রণ করতে আপনি ফ্লেক্সবক্স ব্যবহার করতে পারেন :

* { box-sizing: border-box; }

#content {
  background-color: rgba(210, 210, 210, 0.5);
  border: 1px solid #000;
  padding: 0.5rem;
  display: flex;
}

#left,
#right {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid #fff;
  padding: 0.5rem;
  flex-grow: 1;
  color: #fff;
}

<div id="content">
  <div id="left">
     <div id="object1">lorem ipsum</div>
     <div id="object2">dolor site amet</div>
  </div>

  <div id="right">
     <div id="object3">lorem ipsum</div>
     <div id="object4">dolor site amet</div>
  </div>
</div>

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

Question 12

ফ্লোটগুলি প্রবাহকে প্রভাবিত করে না। আমি কি করতে ঝোঁক এটি যুক্ত করা হয়

<p class="extro" style="clear: both">possibly some content</p>

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

#content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#content {
  display: inline-block;
}
/*  \*/
* html #content {
  height: 1%;
}

#content {
  display: block;
}
/*  */

মন্তব্যগুলির সাথে কৌশলগুলি ক্রস ব্রাউজারের সামঞ্জস্যের জন্য।

Question 13

এখানে সেরা উত্তর দেওয়া হয়েছে প্রশ্ন 211383

আজকাল, কোনও স্ব-সম্মানিত ব্যক্তির ক্লিয়ারিং ফ্লোটগুলির বিবৃত "মাইক্রো-ক্লিয়ারফিক্স" পদ্ধতির ব্যবহার করা উচিত।

Question 14

প্যারেন্ট ডিআইভিতে ফন্টের আকার শূন্যের সমান করুন।
প্রতিটি শিশু ডিআইভির জন্য প্রস্থ% নির্ধারণ করুন।
```
#content {
    font-size: 0;
}

#content > div {
    font-size: 16px;
    width: 50%;
}
```

* সাফারিতে আপনাকে এটি কার্যকর করতে 49% নির্ধারণ করতে হতে পারে।

Question 15

দুটি কলামে একটি বিভাগ বিভক্ত করা খুব সহজ, আপনি যদি এটি (প্রস্থ: 50% এর মতো) রাখেন তবে আপনার কলামের প্রস্থটি আরও ভালভাবে সুনির্দিষ্ট করুন এবং বাম কলামের জন্য বাম এবং বাম ভাসা: ডান কলামের জন্য ডানদিকে স্থাপন করুন।