Saya ingin memiliki dua item pada baris yang sama menggunakan float: left
untuk 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 / <---
+---------------+ +------------------------\
/
css
css-float
css-tables
stretching
Jiaaro
sumber
sumber
Jawaban:
Bungkus apung Anda
<div>
dalam wadah<div>
yang menggunakan retas lebar-lebar lintas-peramban ini:Anda mungkin juga perlu mengatur "overflow" tetapi mungkin tidak.
Ini berfungsi karena:
!important
deklarasi, dikombinasikan denganmin-width
penyebab segala sesuatu untuk tetap pada baris yang sama di IE7 +min-width
, tetapi memiliki bug sehinggawidth: 100px
mengesampingkan!important
deklarasi, menyebabkan lebar kontainer menjadi 100px.sumber
Pilihan lain adalah, alih-alih mengambang, untuk mengatur properti white-space nowrap ke div induk:
dan mengatur ulang ruang putih dan menggunakan tampilan inline-block sehingga div tetap di jalur yang sama tetapi Anda masih bisa memberikan lebar.
Berikut ini adalah JSFiddle: https://jsfiddle.net/9g8ud31o/
sumber
Bungkus floaters Anda dalam div dengan lebar minimum lebih besar dari gabungan lebar + margin floaters.
Tidak perlu hacks atau tabel HTML.
sumber
Solusi 1:
display: table-cell (tidak didukung secara luas)
Solusi 2:
meja
(Aku benci retas.)
sumber
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.
sumber
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.
sumber
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.
sumber
Tambahkan baris ini ke pemilih elemen apung Anda
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%
sumber
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.
sumber
Cara saya menyiasati ini adalah dengan menggunakan beberapa jQuery. Alasan saya melakukannya dengan cara ini adalah karena A dan B adalah lebar persen.
HTML:
CSS:
jQuery:
sumber