如何使塊浮動圖像正確

Question

這裏是我的代碼：

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

我想說明和數據塊浮在圖像周圍。數據段每個佔50％（實際項目有更多的數據行，但每行有2個數據）。它看起來碩大的屏幕上巨大的：

但是，一旦我們增加更多的文字描述或縮小窗口的大小，數據塊將開始去一個新的生產線，因爲我持有人設置75％的寬度（100％ - 對於圖像的25％），數據段不會採取50％的整個寬度已經：

而我試圖解決這一問題（爲了使「某些數據1」和「某些數據2」每個可用空間佔50％ - 圖像1是正確的，圖像2不是）但是找不到方法。請幫幫我。我需要純粹的CSS解決方案。

Answer 1

除非HTML是固定的，這應該工作？將圖像放入容器中，並使用flexbox在文本下面執行兩個列。

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