আমি কীভাবে একই লাইনে পাঠ্য বামে এবং পাঠ্যকে ডানদিকে প্রান্তিককরণ করতে পারি?

Question

আমি কীভাবে পাঠ্যটিকে প্রান্তিককরণ করতে পারি যাতে এটির কিছুটি বামদিকে সারিবদ্ধ হয় এবং এর কিছুটি একই লাইনের মধ্যে ডানদিকে সারিবদ্ধ হয়?

<p>This text should be left-aligned. This text should be right aligned.</p> 

আমি সরাসরি সমস্ত ইনলাইন বা স্টাইলশিট ব্যবহার করে বামে (বা ডানদিকে) সমস্ত পাঠ্য প্রান্তিককরণ করতে পারি -

<p style='text-align: left'>This text should be left-aligned. 
    This text should be right aligned.</p>

এটি একই লাইনে রেখে আমি কীভাবে সম্পর্কিত পাঠ্য বাম এবং ডানদিকে প্রান্তিককরণ করতে পারি?

Answer 1

<p style="text-align:left;">
    This text is left aligned
    <span style="float:right;">
        This text is right aligned
    </span>
</p>

https://jsfiddle.net/gionaf/5z3ec48r/

Comments

text-align:left;এটি float:left;<p> <স্প্যান শৈলীর মতো হওয়া উচিত "" ভাসা: বাম; "> বাম পাঠ্য </ span> <স্প্যান শৈলী =" ভাসা: ডান; "> ডান পাঠ্য </ span> </p>

— শৈলেন্দ্র মাদদা

Answer 2

এইচটিএমএল:

<span class="right">Right aligned</span><span class="left">Left aligned</span>​

সিএসএস:

.right{
    float:right;
}

.left{
    float:left;
}

ডেমো:
http://jsfiddle.net/W3Pxv/1

Comments

@ mawg যদিও এটি হতে পারে তবে আমি শীর্ষের উত্তরটি পছন্দ করি কারণ এটির জন্য CSS প্রয়োজন হয় না require

— মেনাশেহ

বর্তমানে "শীর্ষে" বা "সর্বাধিক ভোট"? উভয়ই বদলে যেতে পারে, সুতরাং আপনি ভবিষ্যতের কোনও রিয়ারকে সহায়তা করছেন না :-) যাইহোক, আমি যখন আপনার মতো শুরু করেছিলাম তখন সমস্ত স্টাইলিং ইন-লাইন দিয়ে, আমি শীঘ্রই বুঝতে পারি যে সামগ্রী এবং উপস্থাপনা পৃথক করার পক্ষে যুক্তিসঙ্গত কারণ রয়েছে। সিএসএস ভীতিজনক নয় এবং আশেপাশে প্রচুর ফ্রি টিউটোরিয়াল রয়েছে - এর জন্য যান

— মওগ বলেছেন মনিকা

Answer 3

আপনি যদি ভাসমান উপাদান ব্যবহার করতে না চান এবং উভয় ব্লক ওভারল্যাপ না হয় তা নিশ্চিত করতে চাইলে, চেষ্টা করুন:

<p style="text-align: left; width:49%; display: inline-block;">LEFT</p>
<p style="text-align: right; width:50%;  display: inline-block;">RIGHT</p>

Comments

এটিই কেবলমাত্র একটি উত্তর যা আপনাকে কেবল দুটি কলামের চেয়ে বেশি ব্যবহার করতে দেয়, যা আমার প্রয়োজন ছিল। ওপি যদিও যত্নশীলতার চেয়ে এটি সম্ভবত আরও দানাদার নিয়ন্ত্রণ।

— ক্রাইস্টেন হাম্মাক 21

Answer 4

এইচটিএমএল ফাইল:

<div class='left'> Left Aligned </div> 
<div class='right'> Right Aligned </div>

সিএসএস ফাইল:

.left
{
  float: left;
}

.right
{
  float: right;
}

এবং আপনি সম্পন্ন ....

Comments

এটি পুরানো তবে আপনাকে 2 টি ডিআইভি যেমন একটি ডিআইভির মতো অন্য ট্যাগ দিয়ে ঘিরতে হবে বা এটি কাজ করে না।

— পানামা জ্যাক

Answer 5

<h1> left <span> right </span></h1>

সিএসএস:

h1{text-align:left; width:400px; text-decoration:underline;}
span{float:right; text-decoration:underline;}

Answer 6

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

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

এইচটিএমএল

<table style="width: 100%;">
  <tr><td>Left aligned stuff</td>
      <td class="alignRight">Right aligned stuff</td></tr>
</table>

সিএসএস

.alignRight {
  float: right;
}

https://jsfiddle.net/esoyke/7wddxks5/

Comments

এটি আমার কাছে সোনার কাছাকাছি, তবে সিএসএস টেবিলের বৈশিষ্ট্যগুলি কেন ব্যবহার করে দুটি ঘরটি অনুভূমিকভাবে রেখার বাইরে চলেছে? jsfiddle.net/7wddxks5/7 আমার কাছাকাছি আসতে পারে বলে মনে হচ্ছে না।

— অ্যাডমিট

প্রকৃতপক্ষে, আমার জন্য, যেহেতু আমি সঠিক পাঠ্যটি ডানদিকে প্রান্তিককরণ করতে চাই, তাই এটি কেবল সঠিকভাবে কাজ করে মনে হচ্ছে যদি আমি কেবল টেক্সট-সারিবদ্ধকরণ করি: ডান এবং ভাসমান থেকে মুক্তি পান।

— অ্যাডমিট

এটি কেন উল্লম্ব স্থানান্তরের কারণ হচ্ছিল তা আমি বুঝতে পারি না। তবে আমি উল্লম্ব-প্রান্তিককরণের সাথে এটি ঠিক করতে সক্ষম হয়েছি। এইচটিএমএলকে কিছুটা পরিষ্কার করতে স্টাইলগুলি ক্লাসে টানুন। jsfiddle.net/o10ogqkd

— এরিক

এটি এখানে একটি মার্জিত সমাধান। আমি মনে করি এটি গ্রহণযোগ্য উত্তর হওয়া উচিত কারণ এটি সারণী ট্যাগ ব্যবহারে আরও সৃজনশীলতার নিয়োগ দেয়

— রোটিমি

Answer 7

আপনি বাম বা ডানদিকে সারিবদ্ধ করতে চান এমন প্রতিটি বা শব্দের গোষ্ঠীতে স্প্যান যুক্ত করুন। তারপরে স্প্যানে আইডি বা ক্লাস যুক্ত করুন:

<h3>
<span id = "makeLeft"> Left Text</span>
<span id = "makeRight"> Right Text</span>
</h3>

সিএসএস-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

Comments

এইচটিএমএল স্পেস অনুসারে, আপনার উদাহরণের জন্য কোনও আইডি নয়, একটি ক্লাস ব্যবহার করা উচিত।

— সার্জিও

Answer 8

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

<div class="row">
    <div class="col" style="text-align:left">left align</div>
    <div class="col" style="text-align:right">right align</div>
</div>

Answer 9

আপনি যদি পাঠ্যের সারিবদ্ধ পরিবর্তন করতে চান তবে কেবল একটি ক্লাস করুন make

.left {
text-align: left;
}

এবং পাঠ্যের মাধ্যমে যে শ্রেণি বিস্তৃত

<span class='left'>aligned left</span>

Comments

এটি প্রতি লাইনে একচেটিয়া প্রান্তিককরণের প্রশ্নের অর্ধেক উত্তর।

— টিমজামান