আমি কীভাবে ডিভ উপাদানগুলিকে ডানদিকে সামঞ্জস্য করব?


350

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

#cTask {
  background-color: lightgreen;
}

#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  float: right;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  <script type="text/javascript" src="timeline.js"></script>
  <link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>

<body bgcolor="000" TEXT="FFFFFF">
  <div id="button">
    <button onclick="showForm()" type="button" id="cTask">
        Create Task
    </button>
  </div>
  <div id="addEventForm">
    <form>
      <p><label>Customer name: <input></label></p>
      <p><label>Telephone: <input type=tel></label></p>
      <p><label>E-mail address: <input type=email></label></p>
    </form>
  </div>
  <div>
    <canvas id="myBoard" width="1000" height="600">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>

উত্তর:


336

আপনি একটি ডিভ তৈরি করতে পারেন যা ফর্ম এবং বোতাম উভয়ই ধারণ করে, তারপরে ডিভটি ডানদিকে ভাসিয়ে তুলুন float: right;


কখনও ভেবে দেখিনি যে আমি ভাসা ব্যবহার করব। আমি চেষ্টা করেছি margin-left: auto;কিন্তু এটি কার্যকর হয়নি যা আমাকে অবাক করেছিল কারণ আমি যে উপাদানটি ডানদিকে প্রান্তিককরণের চেষ্টা করছি তা আপেক্ষিক।
ডিএফএসএফট

461

ভাসমানগুলি ঠিক আছে তবে ie ও with এর সাথে সমস্যাযুক্ত।

আমি margin-left:auto; margin-right:0;অভ্যন্তরীণ ডিভ ব্যবহার করতে পছন্দ করব


6
@ শেলনিঞ্জা কেন? আমি জানি 0বৈধ, তবে 0px হয় ... আপনার বক্তব্য তর্ক করুন যাতে আমরা কিছু শিখি।
pstanton

29
ইউনিটটি ছেড়ে যাওয়া ব্রাউজারকে এই উন্নত কর্মক্ষমতা রেন্ডার করার জন্য নির্দিষ্ট গণনাগুলি এড়াতে দেয়। যদি এটি শূন্য হয় তবে কেন ইউনিটের উপর ভিত্তি করে লেআউটগুলিতে সংস্থান সংস্থানগুলি অপচয় করবেন? শূন্যটি ইউনিট নির্বিশেষে শূন্য ... কেউ ভাবেন যে এই যুক্তিটি এখনই ব্রাউজারগুলিতে তৈরি হবে। লিঙ্ক
শেলনিজা

7
দ্বিমত করতে পারে না তবে আমি সন্দেহ করি এটি কার্য সম্পাদনকে অনেক প্রভাবিত করে। সম্পাদনা করুন।
pstanton

24
আমি এটি কাজ করতে পারি না, Div এখনও বামদিকে প্রান্তিক হয়। আপনি কি এইচটিএমএল / সিএসএসের কোনও ফিডল বা কিছু (আরও) লাইন সরবরাহ করতে পারেন?
গ্রিডো

21
আপনার উপাদানটি আছে তা নিশ্চিত করুনdisplay: block;
derek_duncan

202

পুরানো উত্তর। একটি আপডেট: ফ্লেক্সবক্স ব্যবহার করুন, এখন সমস্ত ব্রাউজারে বেশ কাজ করে।

<div style="display: flex; justify-content: flex-end">
  <div>I'm on the right</div>
</div>

এবং আপনি এমনকি ফ্যানসিয়ার পেতে পারেন, সহজভাবে:

<div style="display: flex; justify-content: space-around">
  <div>Left</div>
  <div>Right</div>
</div>

এবং ফ্যানসিয়ার:

<div style="display: flex; justify-content: space-around">
   <div>Left</div>
   <div>Middle</div>
  <div>Right</div>
</div>


4
এটি কাজ করে, তবে যখন পর্দা স্ট্যাকিংয়ের পরিবর্তে ছোট হয়ে যায় তখন তারা কেবল সংকীর্ণ হয়ে পড়ে
jean d'arme

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

এটি আমার পক্ষে কাজ করেছে। পূর্ববর্তী উত্তরগুলি দেয় নি। "চকচকে" ব্যবহার করা হচ্ছে।
রজার

30

এই প্রশ্নের অন্যান্য উত্তরগুলি এতটা ভাল নয় যেহেতু float:rightপিতামাতার ডিভের বাইরে যেতে পারে (ওভারফ্লো: পিতামাতার জন্য লুকানো কখনও কখনও সহায়তা করতে পারে) এবং margin-left: auto, margin-right: 0আমার পক্ষে জটিল নেস্টেড ডিভগুলিতে কাজ করেনি (কেন আমি তদন্ত করিনি)।

আমি নির্ধারণ করেছি যে নির্দিষ্ট উপাদানগুলির জন্য text-align: rightকাজ করে, ধরে নেওয়া যায় যে উপাদান এবং পিতা inlineবা মাতা উভয় বা হ'লে এই কাজ করে inline-block

দ্রষ্টব্য: text-alignসিএসএস সম্পত্তি বর্ণনা করে যে পাঠ্যের মতো ইনলাইন সামগ্রী কীভাবে এর প্যারেন্ট ব্লক উপাদানটিতে প্রান্তিক হয়। text-alignকেবলমাত্র তাদের ইনলাইন সামগ্রীতেই ব্লক উপাদানগুলির প্রান্তিককরণ নিয়ন্ত্রণ করে না।

একটি উদাহরণ:

<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
    <div style="display: block; width: 100%">
        I'm parent
    </div>
    <div style="display: inline-block; text-align: right; width: 100%">
        Caption for parent
    </div>
</div>

এখানে একটি জেএস ফিডল



15

আপনার যদি একাধিক ডিভ থাকে তবে আপনি পিতা বা মাতা ডিভের ডান প্রান্তে পাশাপাশি পাশাপাশি প্রান্তিককরণ চান চান তবে পিতামহক ডিভের text-align: right;উপর সেট করুন।


14

আপনি ব্যবহার করতে পারেন flexboxসঙ্গে flex-growডানদিকে শেষ উপাদান ধাক্কা।

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>

1
আমি ব্যক্তিগতভাবে মনে করি এটি 2020 এর সঠিক উত্তর: পি
মাইক কেলোগ

2

আপনার যদি আই 99 সমর্থন না করতে হয় এবং নীচে আপনি এটি সমাধান করতে ফ্লেক্সবক্স ব্যবহার করতে পারেন: কোডেপেন

আইই 10 এবং 11 ( ফ্লেক্সবক্স সমর্থন ) সহ কয়েকটি বাগ রয়েছে তবে তারা এই উদাহরণে উপস্থিত নেই

আপনি একটি <button>এবং <form>ধারকটি একটি ধারক দিয়ে মোড়কে উল্লম্বভাবে সারিবদ্ধ করতে পারেন flex-direction: column। উপাদানগুলির উত্স ক্রম হ'ল ক্রম হবে যাতে তারা উপরে থেকে নীচে প্রদর্শিত হবে যাতে আমি তাদের পুনর্বিন্যাস করি।

তারপরে আপনি ফর্ম ও বোতাম ধারকটি একটি কন্টেইনারে আবদ্ধ করে ক্যানভাসের সাথে আনুভূমিকভাবে সারিবদ্ধ করতে পারেন flex-direction: row। আবার উপাদানগুলির উত্সের ক্রম হ'ল ক্রম হবে যাতে তারা বাম থেকে ডানে প্রদর্শিত হবে যাতে আমি তাদের পুনর্বিন্যাস করি।

এছাড়াও, এর জন্য আপনাকে প্রশ্নের লিঙ্কযুক্ত কোড থেকে সমস্ত positionএবং floatস্টাইলের নিয়ম সরিয়ে ফেলা প্রয়োজন ।

উপরে লিঙ্কিত কোডেনটিতে HTML এর ছাঁটা ডাউন সংস্করণটি এখানে।

<div id="mainContainer">
  <div>
    <canvas></canvas>
  </div>
  <div id="formContainer">
    <div id="addEventForm"> 
      <form></form>
    </div>
    <div id="button">
      <button></button>
    </div>
  </div>
</div>

এবং এখানে প্রাসঙ্গিক সিএসএস

#mainContainer {
  display: flex;
  flex-direction: row;
} 

#formContainer {
  display: flex;
  flex-direction: column;
}


0

আপনি সহজেই প্যাডিং-বাম ব্যবহার করতে পারেন: আপনার সামগ্রীটি ডানদিকে প্রান্তিককরণ করতে 60% (প্রাক্তন হিসাবে) সমস্ত উদাহরণে কাজ করে তা নিশ্চিত করার জন্য একই সাথে প্রতিক্রিয়াশীল ধারকটিতে আমার লিখিত বিষয়বস্তু আবশ্যক (আমার ক্ষেত্রে নববার প্রয়োজন)।


0

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করেন তবে:

<div class="pull-right"></div>

আমার মনে হয় আপনি বোঝানো <div class="text-right"></div>
অ্যালেক্স বার্কার

1
আনিল ভুল নয়, ক্লাস "পুল-ডান" ফলাফল "ভাসা: অধিকার;" (বুটস্ট্র্যাপ 3.4.1 দিয়ে পরীক্ষিত)
ফ্যাবিয়ান হরল্যাচার

-13

আমি জানি এটি একটি পুরানো পোস্ট তবে আপনি কেবল <div id=xyz align="right">ডান জন্য ব্যবহার করতে পারেন নি ।

আপনি কেবল বামে, কেন্দ্রের সাথে ডান প্রতিস্থাপন করতে পারেন এবং ন্যায়সঙ্গত করতে পারেন।

আমার সাইটে কাজ করেছেন :)


21
আপনার পৃষ্ঠাটি ফর্ম্যাট করতে HTML বৈশিষ্ট্যগুলি ব্যবহার করবেন না। সিএসএস এর জন্য তৈরি হয়েছিল। আসলে, alignবৈশিষ্ট্যটি এখন অবচয় করা হয়েছে
হান্না

4
... এবং এই কারণেই এই জাতীয় প্রশ্নের কারণ এবং এর উত্তর দেওয়ার প্রয়োজনীয়তা, কারণ পুরানো পদ্ধতিগুলি আর কাজ করে না।
vapcguy

ওহোহোহ, এতটা নেতিবাচক))
নেসি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.