Nested টেক্সট-এইচটিএমএল সারিবদ্ধ

আমার একটি div উপাদান আছে যা আমি পৃষ্ঠাটির ডানদিকে সাইন ইন করতে চাই। উদাহরণ স্বরূপ,

<div class="meta">
     Answered May 12 '20 at 14:32 
<div class="author">Person A</div> </div> .meta { text-align: right; }

যা এই মত দেখায়:

                                                Answered May 12 '20 at 14:32
                                                                    Person A


Now, I would like the .author div to be aligned left within .meta div, to look like this:

                                                Answered May 12 '20 at 14:32
                                                Person A

তাই আমি এই যোগ করেছেন:

.author {
    text-align: left;
}

কিন্তু এর ফলে এটি ঘটেছে:

                                                Answered May 12 '20 at 14:32
Person A

আমি উপরে কি প্রভাব অর্জন করতে শৈলী ব্যবহার করা উচিত?

0

8 উত্তর

এটি ঘটছে কারণ আপনার । Author div 100% প্রস্থ কারণ তার পিতামাতা একটি ব্লক উপাদান।

তাই এটি সমাধান করার জন্য আপনার । মেটা div একটি অন্য ডিভাইনের ভিতরে । Wrap টিপুন এবং তারপরে পাঠ্য-সারিবদ্ধ করুন: ডান প্রয়োগ করুন। এছাড়াও আপনাকে প্রদর্শন: ইনলাইন-ব্লক .meta </​​code> div এ প্রয়োগ করতে হবে যাতে এটি শুধুমাত্র তার বিষয়বস্তু প্রস্থটি 100% নিতে পারে।

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.wrap {
  text-align: right;
}

.meta {
  display: inline-block;
}

.author {
  text-align: left;
}
<div class="wrap">
  <div class="meta">
    Answered May 12 '20 at 14:32 
<div class="author">Person A</div> </div> </div>
</div> </div>
3
যোগ
ধন্যবাদ, ভূওয়ান। যে কাজ।
যোগ লেখক akshayKhot, উৎস

আমি মনে করি আপনি এই মত করতে পারেন

<div align="right">

search in this link https://www.w3schools.com/tags/att_p_align.asp

2
যোগ

i think you can do like this <div align="right"> searsh in this link https://www.w3schools.com/tags/att_p_align.asp

2
যোগ
কেন আপনি এই তিন বার পোস্ট করেছেন?
যোগ লেখক Wai Ha Lee, উৎস

i think you can do like this <div align="right"> searsh in this link https://www.w3schools.com/tags/att_p_align.asp

2
যোগ

হ্যাঁ, সহজ সমাধান এই।

সিএসএস

.meta {
    text-align: right;     
}
.title{
    display: inline-block;
    text-align: left;
}

এইচটিএমএল

<div class="meta">
    <div class="title">
     Answered May 12 '20 at 14:32 
<div class="author">Person A</div> </div> </div>

গুড লাক।

1
যোগ

সমাধান # 1। ফ্লেক্স ব্যবহার করুন।<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.meta {
  display: flex;
    justify-content: flex-end;
}
<div class="meta">
    <div class="title">
     Answered May 12 '20 at 14:32 
<div class="author">Person A</div> </div> </div>
</div> </div>

সমাধান # 2। বামে পাঠ্যটি সংলগ্ন করুন (ডিফল্ট) এবং বাম মার্জিন যুক্ত করুন যাতে ডিভিটিকে ডান পাশে আলগা করতে পারেন।

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.meta {
    margin-left: 75%;
}
<div class="meta">
     Answered May 12 '20 at 14:32 
<div class="author">Person A</div> </div>
</div> </div>
0
যোগ

আপনি এটি করতে পারেন:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.meta {
  position: absolute;
  right: 0;
  text-align: left;
}
<div class="meta">
  Answered May 12 '20 at 14:32 
<div class="author">Person A</div> </div>
</div> </div>
0
যোগ
<div class="meta" style="float: right;">
    Answered May 12 '20 at 14:32
    <div class="author">Person A</div>
</div>
<div style="clear: both;"></div>
0
যোগ
মনে রাখুন : আপনি ভাসমান জন্য Clearfix হ্যাক ব্যবহার করতে হবে।
যোগ লেখক bilashism, উৎস