সিএসএস একে অপরের পাশে দুটি ডিভ

Question

আমি <div>একে অপরের পাশে দুটি রাখতে চাই । অধিকার <div>200px সম্পর্কে নয়; এবং বামে <div>অবশ্যই স্ক্রিনের বাকি প্রশস্ততা পূরণ করতে হবে? কিভাবে আমি এটি করতে পারব?

Answer 1

আপনি আপনার আইটেমগুলি রাখার জন্য ফ্লেক্সবক্স ব্যবহার করতে পারেন :

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

এটি মূলত ফ্লেক্সবক্সের পৃষ্ঠকেই স্ক্র্যাপ করছে। ফ্লেক্সবক্স বেশ আশ্চর্যজনক জিনিস করতে পারে।

---

পুরানো ব্রাউজার সমর্থনের জন্য, আপনি এটি সমাধানের জন্য সিএসএস ফ্লোট এবং প্রস্থের বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন ।

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Comments

এটি আসলে সঠিক উত্তর, সংক্ষিপ্ত, এবং - বর্তমানে এটির উপরে দুটিটির থেকে পৃথক - সম্পূর্ণ স্ব-অন্তর্নিহিত। আইএমও, এসও-তে সেরা উত্তরগুলি ঠিক এর মতো হওয়া উচিত। +1

— ববি জ্যাক

বাম হতে হবে কেন বিশদভাবে যত্ন float:left? আমার উত্তরে আপনার মন্তব্যে বলা হয়েছে যে 'বাম দিকের সমস্ত অংশটি স্প্যান্ট লেফট ডিভের প্রয়োজন হয়', তবে float:leftএটি সামগ্রীটিকে শক্তভাবে মোড়ানোর কারণ করবে।

— ফালস্ট্রো

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

— মুসার

তবে একটি বিষয় লক্ষণীয় যে ইনলাইন-ব্লক IE এর পুরানো সংস্করণগুলিতে কাজ করবে না ...

— মুসার

@ মুসার আমি আপনার মন্তব্যের সাথে একমত হয়েছি তবে মনে রাখবেন এই উত্তরটি ২০০৯ থেকে আসে ... এমন এক সময় যখন আপনি "আই-এর পুরানো সংস্করণ" (যেমন: আইই 8 এবং এর নীচে) বলছেন তা আইই এর "বর্তমান" সংস্করণ ছিল ...

— লরেন্ট এস

Answer 2

আমি জানি না এটি এখনও একটি বর্তমান সমস্যা কিনা না তবে আমি কেবল একই সমস্যার মুখোমুখি হয়েছি এবং সিএসএস display: inline-block;ট্যাগ ব্যবহার করেছি । এগুলি একটি ডিভের মধ্যে মোড়ানো যাতে তারা যথাযথভাবে অবস্থান করতে পারে।

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

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

Comments

এটি ছিল আমার জন্য সমাধান। আমি [] [] এর মতো সংলগ্ন দুটি ডিভ চাইছিলাম (মানুষ এটি করার পরে অনেকক্ষণ হয়ে গেছে ..) =) কুডোস।

— পার্টাক

এটি আমার জন্যও কাজ করেছিল। আমার আরেকটি ফ্লোট নিয়ে কিছু সমস্যা ছিল: ডান ডি ডি আমার ডান কলামটি বাম দিকের নীচে রেখে দিচ্ছে, তাই আমি ধারকটি ব্যবহারের প্রদর্শনটিও করেছি: ইনলাইন-ব্লক এবং এটি 'সমাধান করেছে।

— মার্টিন কার্নি

বিষয়বস্তু যখন কন্টেন্ট 1 ডিআইভিতে বড় হয় তখন এটি কাজ করে না। ফলাফলটি হ'ল ডিআইভিগুলি পাশাপাশি পাশাপাশি দুটি পৃথক লাইনে রয়েছে।

— রিচার্ড হোলিস

@ রিচার্ডহোলিস আমি widthআমার সমস্ত 2 ডিভের সম্পত্তি একে অপরের পাশে সেট করতে পেরেছিলাম যাতে দ্বিতীয়টিকে একটি নতুন লাইনে আবদ্ধ করতে না পারে ।

— ত্রিনডাজ

সিএসএস উল্লম্ব-সারিবদ্ধ: শীর্ষ; উভয়কেও, অন্যথায় যদি সামগ্রীর দৈর্ঘ্য পৃথক হয় তবে তারা একে অপরকে চাপ দেবে

— প্রসপেক্টর

Answer 3

দুর্ভাগ্যক্রমে, এটি সাধারণ ক্ষেত্রে সমাধান করা তুচ্ছ বিষয় নয়। সবচেয়ে সহজ জিনিসটি হ'ল একটি CSS-শৈলীর বৈশিষ্ট্য যুক্ত করা "ভাসা: অধিকার;" আপনার 200 পিএক্স ডিভিউতে যাইহোক, এটি আপনার "মূল" -ডাইভকে প্রকৃতপক্ষে পুরো প্রস্থের কারণ হতে পারে এবং সেখানে যে কোনও পাঠ্য 200px-div এর প্রান্তে প্রায়শই ভেসে উঠবে, যা সামগ্রীটির উপর নির্ভর করে প্রায়শই অদ্ভুত দেখায় (বেশ কিছুটা সমস্ত ক্ষেত্রে এটি কোনও ভাসমান চিত্র ব্যতীত)।

সম্পাদনা: ডমের পরামর্শ অনুসারে, মোড়কের সমস্যা অবশ্যই মার্জিন দিয়ে সমাধান করা যেতে পারে। বোকা আমাকে।

Comments

'ভাসা: বাম' আরও উপযুক্ত হবে, বাম দিকের সমস্ত অংশের স্প্যান্ট লেফট ডিভের প্রয়োজন। কোনও অপরাধ বোঝানো হয়নি, কেবল বিবেচনা করুন।

— এমএন

Answer 4

@Ro এবং @ মোহিতনান্দা দ্বারা প্রস্তাবিত পদ্ধতিটি কাজ করে, তবে যদি ডান ডিভটি সেট করা থাকে float:right;তবে অবশ্যই এটি HTML উত্সে প্রথমে আসতে হবে। এটি বাম থেকে ডান পড়ার ক্রম ভঙ্গ করে, যা পৃষ্ঠাটি শৈলীগুলি বন্ধ করে প্রদর্শিত হলে বিভ্রান্তিকর হতে পারে। যদি এটি হয় তবে একটি মোড়ক ডিভ এবং পরম অবস্থান ব্যবহার করা ভাল:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

প্রদর্শিত:

বাম ডান

সম্পাদনা: হুম, আকর্ষণীয়। পূর্বরূপ উইন্ডোটি সঠিকভাবে ফর্ম্যাটেড ডিভগুলি দেখায়, তবে রেন্ডার পোস্ট আইটেমটি তা করে না। তবে দুঃখিত, আপনার নিজের জন্য এটি চেষ্টা করতে হবে।

Answer 5

আমি আজ এই সমস্যা মধ্যে দৌড়ে। উপরের সমাধানগুলির উপর ভিত্তি করে, এটি আমার পক্ষে কাজ করেছে:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

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

Answer 6

হালনাগাদ

আপনার যদি এক সারিতে উপাদান রাখার প্রয়োজন হয় তবে আপনি ফ্লেক্স লেআউটটি ব্যবহার করতে পারেন । এখানে আপনার আরও একটি ফ্লেক্স টিউটোরিয়াল রয়েছে । এটি একটি দুর্দান্ত সিএসএস সরঞ্জাম এবং এটি 100% সামঞ্জস্যপূর্ণ না হলেও প্রতিদিন এর সমর্থন আরও ভাল হচ্ছে। এটি এতটা সহজ কাজ করে:

এইচটিএমএল

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

সিএসএস

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

এবং আপনি এখানে যা পাবেন মোট চারটি ইউনিটের একটি ধারক যা 1/4 এবং 3/4 এর সাথে তার বাচ্চাদের সাথে স্থান ভাগ করে দেয়।

আমি কোডপেনে এমন একটি উদাহরণ করেছি যা আপনার সমস্যার সমাধান করে। আমি আসা করি এটা সাহায্য করবে.

http://codepen.io/timbergus/pen/aOoQLR?editors=110

অতিবৃদ্ধ

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

আপনি একটি 1x2 টেবিল তৈরি করতে পারেন এবং নিজের divsভিতরে রেখে দিতে পারেন, এবং তারপরে সিএসএসের সাহায্যে টেবিলটি বিন্যাস করতে পারেন যাতে আপনি চান:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

বিঃদ্রঃ

আপনি যদি আগের মতো সারণীটি ব্যবহার করা এড়াতে চান তবে আপনি ব্যবহার করতে পারেন float: left;এবং float: right;নীচের উপাদানটিতে একটি যুক্ত করতে ভুলবেন না clear: left;, clear: right;বা clear: both;অবস্থান পরিষ্কার করার জন্য।

Comments

টেবিলগুলি হ'ল পরিবর্তিত "ফ্লোট" এর চেয়ে অনেক বেশি অনুমানযোগ্য সমাধান যা আপনি যখন উপাদান যুক্ত করেন বা সরিয়ে ফেলেন তখন সর্বদা কিছু ঝামেলা হয় বলে মনে হয়।

— কোকোডোকো

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

— জ্যাক ক্ল্যান্সি

Answer 7

div1 {
    float: right;
} 
div2 {
    float: left;
}

আপনি clear: bothএই দুটি কলাম ব্লককে পৃথক করে এমন উপাদানটির জন্য যতক্ষণ না সেট করছেন ঠিক ততক্ষণ এটি কাজ করবে ।

Comments

ফ্লোটগুলি ব্যবহার করার সময়, আপনাকে প্রস্থের সম্পত্তি সেট করতে হবে। সুতরাং আমি এটি একটি ভাল সমাধান বলে মনে করি না ..

— মার্টিজন

Answer 8

আমি একই সমস্যায় পড়েছিলাম এবং মোহিতস সংস্করণ কাজ করে। আপনি যদি এইচটিএমএলতে আপনার বাম-ডান ক্রম রাখতে চান তবে এটি চেষ্টা করে দেখুন। আমার ক্ষেত্রে, বাম ডিভটি আকারটি সামঞ্জস্য করছে, ডান ডিভটি 260px প্রস্থে থাকে।

এইচটিএমএল

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

সিএসএস

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

কৌশলটি হ'ল মূল বাক্সে একটি ডান প্যাডিং ব্যবহার করা উচিত তবে ডান বাক্সটি আবার মার্জিন-রাইটের সাথে রেখে আবার সেই স্থানটি ব্যবহার করুন।

Comments

আমি ভাসা ছাড়াই কাজ করে না: ডানদিকে। ডান।

— Jusi Palo

Answer 9

আমি ভাসা এবং ওভারফ্লো-এক্স এর মিশ্রণ ব্যবহার করি: লুকানো। সর্বনিম্ন কোড, সর্বদা কাজ করে।

https://jsfiddle.net/9934sc4d/4/ - প্লাস আপনার আপনার ফ্লোট সাফ করার দরকার নেই!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

Comments

আপনি যখন ডিভের উচ্চতা জানেন এবং আপনি জানেন যে বিষয়বস্তু আর এই উচ্চতা দীর্ঘ নয় তখন দরকারী useful যাইহোক, যখন ডিভের উচ্চতার চেয়ে বেশি সামগ্রী রয়েছে, তখন এটি লুকিয়ে থাকে, উপচে

— মার্টিজন

সত্যিই এটি আরও ভাল :)

— মার্টিজন

নিস! লোকজন বেআইনীভাবে নেতিবাচক প্রতিক্রিয়ার পরিবর্তে দরকারী এবং ইতিবাচক প্রতিক্রিয়া সহ ব্যাককে খাওয়ানো দেখতে ভাল। ভাল মানুষ @ মার্তিজজন

— টনি রে ট্যানসলে

এই জন্য আপনাকে ধন্যবাদ. আমি আমার বেশিরভাগ ইউআই কাজ রিএ্যাকটিভ নেটিভে করি এবং ফ্লেক্স বক্সটি HTML + সিএসএস (আমার মতে) এর চেয়ে অনেক বেশি ভাল কাজ করে। এটি আমার জীবনকে আরও সহজ করে তুলেছিল।

— এরিক ভিয়েনার

Answer 10

সবাই যেমন উল্লেখ করেছে, আপনি float:right;আরএইচএস সামগ্রী এবং এলএইচএসে নেতিবাচক মার্জিন সেট করে এটি করবেন।

তবে .. আপনি যদি float: left;এলএইচএসে কোনও ব্যবহার না করেন (যেমন মোহিত করেন) তবে আপনি একটি স্টেপিং এফেক্ট পাবেন কারণ এলএইচএস ডিভ এখনও লেআউটে প্রান্তিক ব্যবস্থাকে গ্রাস করতে চলেছে।

যাইহোক .. এলএইচএস ভাসা সামগ্রীটি সঙ্কুচিত করে দেবে - সুতরাং এটি আপনাকে গ্রহণযোগ্য না হলে একটি সংজ্ঞায়িত প্রস্থের চাইল্ডনোড সন্নিবেশ করতে হবে, সেই সময়ে আপনি পিতামাতার সাথে প্রস্থটিও সংজ্ঞায়িত করতে পারেন।

যাইহোক .. ডেভিড হিসাবে উল্লেখ করেছেন যে আপনি এলএইচএস ফ্লোটের প্রয়োজনীয়তা এড়াতে মার্কআপের রিড-অর্ডার পরিবর্তন করতে পারেন, তবে এতে পঠনযোগ্যতা এবং সম্ভবত অ্যাক্সেসযোগ্যতার সমস্যা রয়েছে।

তবে .. কিছু অতিরিক্ত মার্কআপ দেওয়া ভাসা দিয়ে এই সমস্যা সমাধান করা যেতে পারে

(সতর্কীকরণ: আমি উদাহরণ হিসাবে। পরিষ্কারের ডিভ অনুমোদিত না, বিশদ জন্য এখানে দেখুন)

সমস্ত বিষয় বিবেচনা করা হয়, আমার মনে হয় আমাদের বেশিরভাগেরই ইচ্ছা একটি লোভী প্রস্থ ছিল: CSS3 এ থাকা ...

Answer 11

এটি সবার জন্য উত্তর হবে না, যেহেতু এটি আই 7- এ সমর্থিত নয়, তবে আপনি এটি ব্যবহার করতে পারেন এবং তারপরে আই 7- এর বিকল্প বিকল্প ব্যবহার করতে পারেন। এটি প্রদর্শন: টেবিল, প্রদর্শন: টেবিল-সারি এবং প্রদর্শন: টেবিল-ঘর। নোট করুন যে এটি বিন্যাসের জন্য সারণীগুলি ব্যবহার করছে না, তবে ডিভগুলি স্টাইলিং করছে যাতে উপরের দিক থেকে সমস্ত ঝামেলা শেষ হয়ে যায় things খনি একটি এইচটিএমএল 5 অ্যাপ্লিকেশন, তাই এটি দুর্দান্ত কাজ করে।

এই নিবন্ধটি একটি উদাহরণ দেখায়: http://www.sitepPoint.com/table-based-layout-is-the-next-big-thing/

আপনার স্টাইলশীটটি দেখতে কেমন হবে তা এখানে:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

Answer 12

আমার ওয়েবসাইটগুলির মধ্যে একটি যা অন্যরকম কিছু করে তা বোঝাতে:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

Comments

আমি নয়, তবে আমি সিএসএস হ্যাক, ট্রানজিশনাল ডক্টাইপ বা ব্যাখ্যাটির অভাব অনুমান করব?

— অন্নকাটা

কমপক্ষে এটির একটি ডক্টাইপ ছিল :) আমি অনুমান করি এটি সম্ভবত লোকেরা IE এর মার্জিনের জন্য ব্রাউজার হ্যাকগুলি পছন্দ করে না। কমপক্ষে আমি এটি পরীক্ষা করে দেখেছি ...

— রোল্যান্ড শ

এটা খুব হ্যাকি। অনেকগুলি সংক্ষিপ্ততর সমাধান রয়েছে out

— জন বেল

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

— রাওল্যান্ড শ '

Answer 13

শুধু একটি z- সূচক ব্যবহার করুন এবং সবকিছু সুন্দর বসবে। স্থিত বা নিরঙ্কুশ হিসাবে চিহ্নিত অবস্থান রয়েছে তা নিশ্চিত করুন। তারপরে কোনও ফ্লোট ট্যাগের মতো কিছুই ঘোরাফেরা করবে না।