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%.