it-swarm-id.com

Cara menempatkan teks di kanan atas, atau sudut kanan bawah "kotak" menggunakan css

Bagaimana saya membuat here dan and here berada di sebelah kanan, pada baris yang sama dengan ipsum lorem? Lihat yang berikut ini:

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>

Membuat Anda cukup dekat, meskipun Anda mungkin perlu tweak nilai "atas" dan "bawah".

29
Garry Shutler

Apung teks yang Anda inginkan muncul di sebelah kanan, dan di markup pastikan bahwa teks ini dan rentang sekitarnya terjadi sebelum teks yang harus di sebelah kiri. Jika tidak muncul terlebih dahulu, Anda mungkin memiliki masalah dengan teks yang diambangkan muncul pada baris yang berbeda.

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

Perhatikan bahwa ini berfungsi untuk garis apa pun, bukan hanya sudut atas dan bawah.

3
phloopy

Jika posisi elemen yang mengandung Lorum Ipsum disetel absolut, Anda dapat menentukan posisi melalui CSS. Elemen "di sini" dan "dan di sini" perlu dimasukkan dalam elemen level blok. Saya akan menggunakan markup seperti ini.

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

Inilah CSS untuk di atas.

 # lipsum {posisi: mutlak; atas: 0; kiri: 0;}/* contoh */
 # di sini {posisi: absolut; atas: 0; kanan: 0;} 
 # andhere {position: absolute; bawah: 0; kanan: 0;} 

Sekali lagi, di atas hanya berfungsi (andal) jika #lipsum diposisikan melalui absolut.

Jika tidak, Anda harus menggunakan properti float.

 # di sini, #andhere {float: right;} 

Anda juga harus meletakkan markup di tempat yang sesuai. Untuk presentasi yang lebih baik, dua div Anda mungkin perlu beberapa padding dan margin agar teks tidak berjalan bersama.

1
BrewinBombers

Baris pertama terdiri dari 3 <div>s. Satu bagian luar yang berisi dua <div>s dalam. Bagian dalam <div> pertama akan memiliki float:left yang akan memastikan itu tetap di sebelah kiri, yang kedua akan memiliki float:right, yang akan menempelkannya ke kanan.

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

... jelas inline-styling bukan ide terbaik - tetapi Anda mengerti maksudnya.

2,3, dan 4 akan menjadi <div>s tunggal.

5 akan bekerja seperti 1.

0
user1151

Anda harus memasukkan "di sini" ke <div> atau <span> dengan style="float: right".

0
AdamB

Anda mungkin dapat menggunakan penentuan posisi absolut.

Kotak kontainer harus diatur ke position: relative.

Teks kanan atas harus diatur ke position: absolute; top: 0; right: 0. Teks kanan bawah harus diatur ke position: absolute; bottom: 0; right: 0.

Anda harus bereksperimen dengan padding untuk menghentikan konten utama kotak agar tidak berjalan di bawah elemen yang diposisikan absolut, karena ada di luar aliran normal isi teks.

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

Anda hanya perlu mengapung elemen div ke kanan dan memberinya margin. Pastikan jangan menggunakan "absolut" untuk kasus ini.

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

Atau bahkan lebih baik, gunakan elemen HTML yang sesuai dengan kebutuhan Anda. Ini lebih bersih, dan menghasilkan markup yang lebih ramping. Contoh:

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

Apungkan em ke kanan (dengan display: block), atau setel ke position: absolute dengan induknya sebagai position: relative.

0
Bruce