it-swarm-vi.tech

Cách đặt văn bản ở góc trên bên phải hoặc góc dưới bên phải của "hộp" bằng css

Làm cách nào tôi có được hereand here ở bên phải, trên cùng một dòng với ipsums lorem? Xem như sau:

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
13
Corey Trager

<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>

Giúp bạn khá gần, mặc dù bạn có thể cần Tweak các giá trị "trên cùng" và "dưới cùng".

29
Garry Shutler

Nổi bên phải văn bản bạn muốn xuất hiện ở bên phải và trong phần đánh dấu, đảm bảo rằng văn bản này và khoảng xung quanh của nó xuất hiện trước văn bản nên ở bên trái. Nếu nó không xảy ra trước, bạn có thể gặp vấn đề với văn bản nổi xuất hiện trên một dòng khác.

<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>

Lưu ý rằng điều này hoạt động cho bất kỳ dòng nào, không chỉ các góc trên cùng và dưới cùng.

3
phloopy

Nếu vị trí của phần tử chứa Lorum Ipsum được đặt tuyệt đối, bạn có thể chỉ định vị trí qua CSS. Các phần tử "ở đây" và "và ở đây" sẽ cần được chứa trong một phần tử mức khối. Tôi sẽ sử dụng đánh dấu như thế này.

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>");

Đây là CSS cho ở trên.

[.__.] # lipum {vị trí: tuyệt đối .] # andhere {vị trí: tuyệt đối; dưới cùng: 0; phải: 0;} [.__.]

Một lần nữa, ở trên chỉ hoạt động (đáng tin cậy) nếu #lipsum được định vị thông qua tuyệt đối.

Nếu không, bạn sẽ cần sử dụng thuộc tính float.

[.__.] # tại đây, #andhere {float: right;} [.__.]

Bạn cũng sẽ cần đặt đánh dấu của bạn ở nơi thích hợp. Để trình bày tốt hơn, hai div của bạn có thể sẽ cần một số phần đệm và lề để văn bản không chạy cùng nhau.

1
BrewinBombers

Dòng đầu tiên sẽ bao gồm 3 <div>s. Một bên ngoài có chứa hai <div>s bên trong. <div> bên trong đầu tiên sẽ có float:left sẽ đảm bảo nó ở bên trái, thứ hai sẽ có float:right, sẽ dán bên phải.

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

... rõ ràng phong cách nội tuyến không phải là ý tưởng tốt nhất - nhưng bạn có được điểm.

2,3 và 4 sẽ là <div>s đơn.

5 sẽ hoạt động như 1.

0
user1151

Bạn cần đặt "ở đây" vào <div> hoặc <span> với style="float: right".

0
AdamB

Bạn có thể sử dụng định vị tuyệt đối.

Hộp chứa phải được đặt thành position: relative.

Văn bản trên cùng bên phải phải được đặt thành position: absolute; top: 0; right: 0. [.__.] Văn bản dưới cùng bên phải nên được đặt thành position: absolute; bottom: 0; right: 0.

Bạn sẽ cần thử nghiệm với padding để ngăn nội dung chính của hộp chạy bên dưới các thành phần được định vị tuyệt đối, vì chúng tồn tại bên ngoài luồng bình thường của nội dung văn bản.

0
ceejayoz
<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>
0
Loren Segal

Bạn chỉ cần thả phần tử div sang bên phải và đặt lề. Hãy chắc chắn rằng không sử dụng "tuyệt đối" cho trường hợp này.

#date {
  margin-right:5px;
  position:relative;
  float:right;
}
0
trillions

Hoặc thậm chí tốt hơn, sử dụng các yếu tố HTML phù hợp với nhu cầu của bạn. Nó sạch hơn, và tạo ra đánh dấu gọn hơn. Thí dụ:

<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>

Di chuyển em sang phải (với display: block) hoặc đặt thành position: absolute với cha mẹ là position: relative.

0
Bruce