Bagaimana cara menyelaraskan rentang ini ke kanan div?

151

Saya memiliki HTML berikut:

<div class="title">
    <span>Cumulative performance</span>
    <span>20/02/2011</span>
</div>

dengan CSS ini:

.title
{
    display: block;
    border-top: 4px solid #a7a59b;
    background-color: #f6e9d9;
    height: 22px;
    line-height: 22px;
    padding: 4px 6px;
    font-size: 14px;
    color: #000;
    margin-bottom: 13px;
    clear:both;
}

Jika Anda memeriksa jsFiddle ini: http://jsfiddle.net/8JwhZ/

Anda dapat melihat bahwa Nama & Tanggal saling menempel. Apakah ada cara agar saya bisa mendapatkan tanggal untuk menyelaraskan ke kanan? Saya sudah mencoba float: right;yang kedua <span>tetapi mengacaukan gaya, dan mendorong tanggal di luar div terlampir

html css DaveDev
sumber
2
Apakah Anda dapat memodifikasi HTML?
Phrogz
3
Jika Anda ingin sesuatu melayang dalam kaitannya dengan objek lain, floater perlu sebelum non-floater. Tanggal harus sebelum judul dan hak mengambang.
Josh Kovach

Jawaban:

246

Jika Anda dapat memodifikasi HTML: http://jsfiddle.net/8JwhZ/3/

<div class="title">
  <span class="name">Cumulative performance</span>
  <span class="date">20/02/2011</span>
</div>

.title .date { float:right }
.title .name { float:left }
Phrogz
sumber
CSS disederhanakan dan layak dibersihkan: keduanya harus ditambahkan. Juga biola mengandung solusi yang sangat rapuh: jsfiddle.net/8JwhZ/2090
Risord
9
Atau jika Anda menginginkannya sebaris (saya lakukan)<span style="float: right">
Tandai
51

Bekerja dengan mengapung agak berantakan:

Trik tata letak 'sepele' seperti ini dapat dilakukan dengan flexbox.

   div.container {
     display: flex;
     justify-content: space-between;
   }

Pada 2017 saya pikir ini adalah solusi yang lebih disukai (over float) jika Anda tidak harus mendukung browser lawas: https://caniuse.com/#feat=flexbox

Periksa biola bagaimana perbedaan penggunaan float dibandingkan dengan flexbox ("dapat mencakup beberapa jawaban yang bersaing"): https://jsfiddle.net/b244s19k/25/ . Jika Anda masih harus tetap menggunakan float, saya merekomendasikan versi ketiga tentu saja.

Risord
sumber
Ini adalah yang saya pilih untuk digunakan, perlu diingat juga mengatur float: left;dan float: right;dalam bentang yang berisi elemen yang ingin Anda ruang.
Ran Lottem
1
Pesan inti dari jawaban ini adalah "float dianggap berbahaya" dan Anda tidak boleh menggunakannya (ok tentu ada beberapa pengecualian yang jarang terjadi). Jadi bisakah Anda menjelaskan mengapa menurut Anda itu ide yang bagus?
Risord
1
Saya pikir floatdiperlukan dalam elemen batin karena saya pikir itu didefinisikan dalam contoh biola untuk mereka, tetapi untuk #testDitu tidak didefinisikan. Salahku!
Ran Lottem
25

Solusi alternatif untuk mengapung adalah dengan menggunakan penentuan posisi absolut:

.title {
  position: relative;
}

.title span:last-child {
  position: absolute;
  right: 6px;   /* must be equal to parent's right padding */
}

Lihat juga biola .

Philipp
sumber
5

Anda dapat melakukan ini tanpa mengubah html. http://jsfiddle.net/8JwhZ/1085/

<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>

.title span:nth-of-type(1) { float:right }
.title span:nth-of-type(2) { float:left }
Kerel
sumber
4

Solusi menggunakan flexbox tanpa justify-content: space-between.

<div class="title">
  <span>Cumulative performance</span>
  <span>20/02/2011</span>
</div>

.title {
  display: flex;
}

span:first-of-type {
  flex: 1;
}

Ketika kita menggunakan flex:1yang pertama <span>, ini akan mengambil seluruh ruang yang tersisa dan memindahkan ruang kedua <span>ke kanan. The Fiddle dengan solusi ini: https://jsfiddle.net/2k1vryn7/

Sini https://jsfiddle.net/7wvx2uLp/3/ Anda dapat melihat perbedaan antara dua pendekatan flexbox: dengan flexbox dengan justify-content: space-betweendan flexbox dengan flex:1yang pertama <span>.

hidro17
sumber