Comment faire des blocs image flottante correctement

Question

Voici mon code:

.container { 
 
     width: 90%; 
 
     margin: 0 auto; 
 
    } 
 
    .holder { 
 
     display: inline-block; 
 
     width: 75%; 
 
     background-color: pink; 
 
    } 
 
    img { 
 
     width: 25%; 
 
     height: auto; 
 
     float: left; 
 
    } 
 
    .data { 
 
     display: inline-block; 
 
     width: 50%; 
 
    }

<div class="container"> 
 
    <h3>Title lacinia sed posuere non, ultricies in nisi</h3> 
 
    <div> 
 
     <img src="http://via.placeholder.com/350x150" alt="Placeholder"> 
 
     <p class="description">Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero.</p> 
 
     <div class="holder"> 
 
     <p class="data">Some Data 1</p><!-- 
 
     --><p class="data">Some Data 2</p> 
 
     </div> 
 
    </div> 
 
    </div>

je voudrais la description et le flotteur de bloc de données autour de l'image. Et les paragraphes de données prennent 50% chacun (le projet réel a plus de rangées de données, mais 2 données par rangée). Et il ressemble beaucoup à l'écran énorme:

Mais une fois que nous ajoutons plus de texte à la description ou restreindre la taille de la fenêtre, les blocs de données commenceront à aller sur une nouvelle ligne et que je mets le porte à largeur de 75% (100% - 25% pour l'image), les données paragraphes ne prendra pas 50% de toute la largeur déjà:

Et je suis en train de résoudre ce problème (pour la "Certaines données 1" et "Certaines données 2" occupent 50% de l'espace disponible - l'image 1 est correcte, l'image 2 ne l'est pas) mais ne parvient pas à trouver un chemin. Aidez-moi s'il vous plaît. J'ai besoin d'une solution CSS pure s'il vous plait.

Answer 1

À moins que le code HTML ne soit corrigé, cela devrait fonctionner? Placez l'image dans un conteneur et utilisez la flexbox pour faire les deux cols sous le texte.

.container { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
} 
 

 
.holder { 
 
    display: flex; 
 
    background-color: pink; 
 
} 
 

 
.block img { 
 
    width: 25%; 
 
    float: left; 
 
    margin-right: 12px; 
 
} 
 

 
.data { 
 
    width: 50%; 
 
}

<div class="container"> 
 
    <h3>Title lacinia sed posuere non, ultricies in nisi</h3> 
 
    <div class="block"> 
 
    <img src="http://via.placeholder.com/350x150" alt="Placeholder"> Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. 
 
    Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. 
 
    Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere 
 
    non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. 
 
    <div class="holder"> 
 
     <p class="data">Some Data 1</p> 
 
     <p class="data">Some Data 2</p> 
 
    </div> 
 
    </div> 
 
</div>