Force float: left on divs tanpa "white-space:nowrap"

Question

Ada sesuatu seperti ini:

<div class="container">

    <div class="floating">
      
      <img src="image" alt="">
      
      <p>
          text...
      </p>
      
    </div>
    
    <div class="floating">
      
      <img src="image" alt="">
      
      <p>
          text...
      </p>

    </div>
    
</div>

Saya mahu div "terapung" terapung ke kiri antara satu sama lain, walaupun ia melimpahi bekas.

Saya cuba menggunakan "float:left" pada div terapung tetapi ia tidak berfungsi. Mereka bertindan di atas satu sama lain.

Jadi saya menemui penyelesaian menggunakan "display:inline-block" pada elemen terapung dan "white-space:nowrap" pada bekas, ia berjaya tetapi ia tidak membantu kes saya.

.container{
    width:600px; 
    border:2px solid black;
    overflow:hidden;
    display:block;
    white-space:nowrap; /* delete this and see the actual floating divs layout*/
}

.floating{
    width:66%;
    display: inline-block;
}

img{
  width:120px; 
  height:120px;
  float:left;
}

Malah, "white-space:nowrap" menghalang teks saya daripada membungkus imgs dalam div terapung, yang merupakan niat asal. "white-space:nowrap" melakukan perkara yang sepatutnya dilakukan, jadi helah ini nampaknya hanya berfungsi jika orang ramai tidak mengambil berat tentang membungkus kandungan di dalam div. Tetapi dalam kes ini saya lakukan.

Jadi, secara ringkasnya, jika saya meninggalkan atribut kosong, 2 div saya terapung seperti yang sepatutnya, tetapi kandungan di dalamnya menjadi kacau. Jika saya tidak menggunakan atribut itu, kandungan di dalam div akan dikekalkan, tetapi div tidak akan terapung.

https://jsfiddle.net/8n0um9kz/

Adakah terdapat sebarang penyelesaian untuk mendapatkan saya apa yang saya mahukan?

Terima kasih.

PS: Saya menggunakan lebar 66% untuk kedua-dua div terapung dalam contoh supaya anda boleh melihat kedua-duanya sebagai ilustrasi. Setahu saya, sudah tentu semuanya 100%.

Answer 1

Ya. Anda ada penyelesaiannya.

Daripada menggunakan 'display : flex' dan 'flex-wrap :wrap' pada bekas, anda boleh menggunakan 'white-space : no-wrap' pada bekas untuk membenarkan item pergi seterusnya apabila ia sampai ke hujung bekas Satu baris. Gunakan selanjutnya 'justify-content : flex -start'

Answer 2

Begitulah saya memahaminya.

.container{
    width:600px; 
    display:flex;  //required
    align-items: flex-start; //optional
    overflow:hidden;
}

.floating{
    min-width: 66%; //required
}

img{
  width:120px; 
  height:120px;
  float:left;
}

Kuncinya ialah menggunakan "min-width" bukannya "width" dan "display:flex" pada bekas.

Tidak perlu menggunakan blok untuk memaparkan, mengeluarkan terapung, mengubah saiz kandungan atau membalut/mengembangkan apa-apa sahaja.

"align-items: flex-start" hanya diperlukan jika div terapung harus mengekalkan ketinggian masing-masing, jika tidak, mereka akan mengambil ketinggian div yang paling tinggi. Ini bukan masalah melainkan anda menggunakan warna latar belakang yang berbeza untuk div terapung daripada bekas.

https://jsfiddle.net/b83rzL07/1/

Terima kasih.