Bagaimana cara menjaga CSS mengapung dalam satu baris?


216

Saya ingin memiliki dua item pada baris yang sama menggunakan float: leftuntuk item di sebelah kiri.

Saya tidak punya masalah mencapai ini sendirian. Masalahnya adalah, saya ingin kedua item tetap di baris yang sama bahkan ketika Anda mengubah ukuran browser sangat kecil . Anda tahu ... seperti halnya dengan tabel.

Tujuannya adalah menjaga barang di sebelah kanan agar tidak terbungkus apa pun yang terjadi .

Bagaimana cara saya memberi tahu browser menggunakan CSS bahwa saya lebih suka meregangkan isidiv daripada membungkusnya sehingga float: right;div di bawah float: left; div?

apa yang saya inginkan:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

54
Betapa kerennya jika StackOverlow menambahkan widget menggambar kecil sehingga kita bisa membuat diagram ini dengan mouse? Mungkin lebih tepat untuk situs SE yang berorientasi pada desain ... tetapi akan sangat mengagumkan.
JoeCool

5
@ JoCool Situs UX SE sebenarnya sudah memiliki alat untuk membuat maket di dalamnya. meta.ux.stackexchange.com/questions/1291/...
frank hadder

Jawaban:


77

Bungkus apung Anda <div>dalam wadah <div>yang menggunakan retas lebar-lebar lintas-peramban ini:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

Anda mungkin juga perlu mengatur "overflow" tetapi mungkin tidak.

Ini berfungsi karena:

  • The !importantdeklarasi, dikombinasikan dengan min-widthpenyebab segala sesuatu untuk tetap pada baris yang sama di IE7 +
  • IE6 tidak menerapkan min-width, tetapi memiliki bug sehingga width: 100pxmengesampingkan !importantdeklarasi, menyebabkan lebar kontainer menjadi 100px.

Ini berfungsi baik untuk dua pelampung, tetapi tidak tiga. Bisakah ini bekerja untuk tiga ??
tylerthemiler

15
Satu-satunya masalah adalah itu memaksa lebar minimum tetap.
Matt Montag

6
Ini bukan solusi, itu hanya min-lebar, ketika konten Anda menjadi sangat kecil (lihat pertanyaan) jadi di bawah 100px Anda memiliki masalah yang sama. Khususnya dengan sel tabel, ini tetap menjadi masalah.
Sanne

Benar-benar mengejutkan - menyelesaikan masalah saya secara instan. Saya telah bergulat dengan masalah ini dalam tata letak bootstrap dua kolom sederhana dengan lebih banyak retasan kotak daripada yang bisa saya sebutkan, tetapi ini bekerja dengan sempurna. Terima kasih atas penjelasan mengapa pekerjaan ini - hal-hal yang menarik, domnya.
nocarrier

Ini mungkin bekerja dengan divs, tapi saya hanya mengujinya dengan ul / li dan itu tidak berhasil :(
AsGoodAsItGets

132

Pilihan lain adalah, alih-alih mengambang, untuk mengatur properti white-space nowrap ke div induk:

.parent {
     white-space: nowrap;
}

dan mengatur ulang ruang putih dan menggunakan tampilan inline-block sehingga div tetap di jalur yang sama tetapi Anda masih bisa memberikan lebar.

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

Berikut ini adalah JSFiddle: https://jsfiddle.net/9g8ud31o/


4
Jelas solusi terbaik yang pernah saya lihat. Ini berfungsi untuk kasus penggunaan saya, tetapi saya ingin tahu seberapa baik itu didukung. Untungnya menggunakan pelampung untuk SEMUANYA perlahan-lahan menjadi sesuatu dari masa lalu.
Ryan Ore

1
Bisakah Anda menjelaskan cara kerjanya? atau tautan setidaknya?
Anirudhan J

4
@AnirudhanJ Tidak terlalu sulit. Inline-blok membuat elemen mengalir secara normal dengan teks inline (tetapi tetap memiliki beberapa kemampuan padding / margin blok), dan Anda benar - benar hanya memberitahu CSS untuk tidak membungkus teks dengan ruang putih: opsi nowrap (menerapkan "normal "lagi untuk anak itu, untuk menghindarinya menjalar ke dalam segalanya)
Brian

Bagaimana Anda mendapatkan div di sebelah kanan untuk mengapung ke kanan layar? Ini hanya menempatkan dua blok sebaris di samping satu sama lain yang tidak akan putus baris.
addMitt

Anda juga dapat menggunakan spasi huruf: -3px (atau nilai apa pun yang berfungsi untuk Anda) untuk menghapus ruang di antara elemen blok-inline. PS: lebih baik dari jawaban yang diterima ;
Claudiu

15

Bungkus floaters Anda dalam div dengan lebar minimum lebih besar dari gabungan lebar + margin floaters.

Tidak perlu hacks atau tabel HTML.


10

Solusi 1:

display: table-cell (tidak didukung secara luas)

Solusi 2:

meja

(Aku benci retas.)


8

Pilihan lain: Jangan mengapung kolom kanan Anda; berikan saja margin kiri untuk bergerak melampaui float. Anda memerlukan satu atau dua hack untuk memperbaiki IE6, tetapi itulah ide dasarnya.


4

Apakah Anda yakin bahwa elemen tingkat blok melayang adalah solusi terbaik untuk masalah ini?

Seringkali dengan kesulitan CSS dalam pengalaman saya ternyata alasan mengapa saya tidak bisa melihat cara melakukan hal yang saya inginkan adalah bahwa saya telah terjebak dalam visi-terowongan sehubungan dengan markup saya (berpikir "bagaimana saya bisa membuat ini elemen melakukan ini ? ") daripada kembali dan melihat apa sebenarnya yang harus saya capai dan mungkin mengerjakan ulang html saya sedikit untuk memfasilitasi itu.


baik itu bekerja untuk hampir semua hal dan tata letak yang ada didasarkan pada hal itu, saya hanya mencoba untuk memperbaiki masalah dengan pemecahan tata letak ketika Anda meningkatkan ukuran teks terlalu banyak ATAU mengubah ukuran jendela browser lebih kecil dari lebar
700px

2

Saya akan merekomendasikan menggunakan tabel untuk masalah ini. Saya mengalami masalah yang sama dan selama tabel hanya digunakan untuk menampilkan beberapa data dan bukan untuk tata letak halaman utama, tidak masalah.


2

Tambahkan baris ini ke pemilih elemen apung Anda

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

Ini akan mencegah padding dan batas ditambahkan ke lebar, jadi elemen selalu tetap dalam baris, bahkan jika Anda memiliki misalnya. tiga elemen dengan lebar 33,33333%


0

Ketika pengguna mengurangi ukuran jendela secara horizontal dan ini menyebabkan pelampung menumpuk secara vertikal, hapus pelampung dan pada div kedua (yang merupakan pelampung) gunakan margin-top: -123px (nilai Anda) dan margin-kiri: 444px (nilai Anda) untuk posisikan divs ketika mereka muncul dengan mengapung. Ketika dilakukan dengan cara ini, ketika jendela menyempit, div sisi kanan tetap di tempatnya dan menghilang ketika halaman terlalu sempit untuk memasukkannya. ... yang (bagi saya) lebih baik daripada memiliki div sisi kanan "lompati" di bawah div sisi kiri ketika jendela browser dipersempit oleh pengguna.


-3

Cara saya menyiasati ini adalah dengan menggunakan beberapa jQuery. Alasan saya melakukannya dengan cara ini adalah karena A dan B adalah lebar persen.

HTML:

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS:

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

jQuery:

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});

1
Kerangka kerja untuk CSS? Saya harus -query untuk SEMUA pencarian JavaScript dan karena pengabaian yang lengkap dan benar-benar mengabaikan kita harus mulai mencari secara eksplisit untuk CSS dengan -query juga? Lakukan dengan benar atau jangan lakukan sama sekali.
John
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.