如何使块浮动图像正确

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>