كيفية وضع النص في الزاوية اليمنى العليا أو السفلية اليمنى من "المربع" باستخدام CSS

StackOverflow https://stackoverflow.com/questions/65536

  •  09-06-2019
  •  | 
  •  

سؤال

كيف يمكنني الحصول على here و and here أن تكون على اليمين، على نفس خطوط لوريم إيبسوم؟انظر ما يلي:

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
هل كانت مفيدة؟

المحلول 

<div style="position: relative; width: 250px;">
  <div style="position: absolute; top: 0; right: 0; width: 100px; text-align:right;">
    here
  </div>
  <div style="position: absolute; bottom: 0; right: 0; width: 100px; text-align:right;">
    and here
  </div>
  Lorem Ipsum etc <br />
  blah <br />
  blah blah <br />
  blah <br />
  lorem ipsums
</div>

يجعلك قريبًا جدًا، على الرغم من أنك قد تحتاج إلى تعديل القيم "العلوية" و"السفلية".

نصائح أخرى

انقل إلى اليمين النص الذي تريد أن يظهر على اليمين، وفي العلامات تأكد من أن هذا النص والامتداد المحيط به يظهر قبل النص الذي يجب أن يكون على اليسار.إذا لم يحدث ذلك أولاً، فقد تواجه مشكلات في ظهور النص العائم على سطر مختلف.

<html>
  <body>
    <div>
      <span style="float:right">here</span>Lorem Ipsum etc<br/>
      blah<br/>
      blah blah<br/>
      blah<br/>
      <span style="float:right">and here</span>lorem ipsums<br/>
    </div>
  </body>
</html>

لاحظ أن هذا يعمل مع أي سطر، وليس فقط الزوايا العلوية والسفلية.

إذا تم تعيين موضع العنصر الذي يحتوي على Lorum Ipsum بشكل مطلق، فيمكنك تحديد الموضع عبر CSS.يجب تضمين عناصر "هنا" و"هنا" في عنصر مستوى الكتلة.سأستخدم العلامات مثل هذا.

print("<div id="lipsum">");
print("<div id="here">");
print("  here");
print("</div>");
print("<div id="andhere">");
print("and here");
print("</div>");
print("blah");
print("</div>");

إليك ملف CSS أعلاه.

#lipsum {position:absolute;top:0;left:0;} /* example */
#here {position:absolute;top:0;right:0;}
#andhere {position:absolute;bottom:0;right:0;}

مرة أخرى، ما ورد أعلاه يعمل فقط (بشكل موثوق) إذا تم وضع #lipsum عبر المطلق.

إذا لم يكن الأمر كذلك، فسوف تحتاج إلى استخدام الخاصية float.

#here, #andhere {float:right;}

ستحتاج أيضًا إلى وضع العلامات الخاصة بك في المكان المناسب.للحصول على عرض أفضل، ربما يحتاج قسما div إلى بعض الحشو والهوامش حتى لا يعمل النص معًا.

<style>
  #content { width: 300px; height: 300px; border: 1px solid black; position: relative; }
  .topright { position: absolute; top: 5px; right: 5px; text-align: right; }
  .bottomright { position: absolute; bottom: 5px; right: 5px; text-align: right; }
</style>
<div id="content">
  <div class="topright">here</div>
  <div class="bottomright">and here</div>
  Lorem ipsum etc................
</div>

أو الأفضل من ذلك، استخدم عناصر HTML التي تناسب احتياجاتك.إنه أنظف وينتج علامات أصغر حجمًا.مثال:

<dl>
   <dt>Lorem Ipsum etc <em>here</em></dt>
   <dd>blah</dd>
   <dd>blah blah</dd>
   <dd>blah</dd>
   <dt>lorem ipsums <em>and here</em></dt>
</dl>

تعويم em إلى اليمين (مع display: block)، أو اضبطه على position: absolute مع والديها كما position: relative.

تحتاج إلى وضع "هنا" في ملف <div> أو <span> مع style="float: right".

السطر الأول سيتكون من 3 <div>س.واحد خارجي يحتوي على اثنين داخليين <div>س.الداخلية الأولى <div> سيكون float:left والتي من شأنها التأكد من بقائها على اليسار، والثانية float:right, ، والذي من شأنه أن يلصقه باليمين.

<div style="width:500;height:50"><br>
<div style="float:left" >stuff </div><br>
<div style="float:right" >stuff </div>

...من الواضح أن التصميم المضمّن ليس هو الفكرة الأفضل - لكنك فهمت الهدف.

2،3، و 4 سيكونون منفردين <div>س.

5 سيعمل مثل 1.

قد تكون قادرا على استخدام تحديد المواقع المطلقة.

يجب ضبط صندوق الحاوية على position: relative.

يجب تعيين النص العلوي الأيمن على position: absolute; top: 0; right: 0.يجب تعيين النص السفلي الأيمن على position: absolute; bottom: 0; right: 0.

سوف تحتاج إلى تجربة padding لإيقاف تشغيل المحتويات الرئيسية للمربع أسفل العناصر ذات الموضع المطلق، حيث أنها موجودة خارج التدفق الطبيعي لمحتويات النص.

ما عليك سوى تعويم عنصر div إلى اليمين وإعطائه هامشًا.تأكد من عدم استخدام "مطلق" في هذه الحالة.

#date {
  margin-right:5px;
  position:relative;
  float:right;
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top