Bagaimana cara menjaga CSS mengapung dalam satu baris?

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  /  <---
 +---------------+  +------------------------\
                                             /

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.

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/

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

Tidak perlu hacks atau tabel HTML.

Solusi 1:

display: table-cell (tidak didukung secara luas)

Solusi 2:

meja

(Aku benci retas.)

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.

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.

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.

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%

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.

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());
});