文本与百分比大小的图像右对齐

Question

我想实现这种布局：左侧是图像，右侧是文本(在多个段落中(，始终使用可用的水平空间。图像和文本之间的距离应始终为 1em。我希望图像使用可用水平空间的百分比 (20%( 作为宽度，但它不应小于 140px(最小宽度：140px(。此外，即使文本的高度比图像长，它也应保持其垂直线，不应浮动在图像下方。

使用下面的代码中的两列不起作用，因为定义最小图像宽度会破坏布局。也许可以使用弹性框完成所需的布局？

注意：使用媒体查询对我来说不是一个选项。

*********  Lorem ipsum
* Image *  On the right, the text uses the
* Image *  available space.
* Image *  The text is made of multiple para-
* Image *  graphs. Important is, that even 
*********  if the text is longer in height
           than the image, it should keep its
           vertical line and should not float
           under the image.

.left {
  float: left;
  width: 25%;
}
.right {
  box-sizing: border-box;
  float: left;
  width: 75%;
  padding-left: 1em;
}
img {
  max-width: 100%;
  height: auto;
  min-width: 140px;
}
.right p:first-of-type {
  margin-top: 0;
  padding-top: 0;
}

<div class="group">
  <div class="left">
    <img src="http://lorempixel.com/640/480/" alt="" />
  </div>
  <div class="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima corporis voluptates
      <p>
        hfbvhjadfbv jsdfbjsdbfbjkvsvd hjfdbg sdbfhj dfhjb dfhjsbjhdv hdf
      </p>repellat ullam labore qui voluptatum error nesciunt ratione dolorem fugiat veritatis ipsum nobis eius dicta est obcaecati ab animi. Voluptatibus dolores natus sint enim fugiat. Sapiente voluptates enim officiis. Iste repudiandae illo nulla sed
      nam a ratione iure?</p>
  </div>
</div>
<div class="group">
  <div class="left">
    <img src="http://lorempixel.com/640/480/" alt="" />
  </div>
  <div class="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima corporis voluptates
      <p>
        hfbvhjadfbv jsdfbjsdbfbjkvsvd hjfdbg sdbfhj dfhjb dfhjsbjhdv hdf
      </p>repellat ullam labore qui voluptatum error nesciunt ratione dolorem fugiat veritatis ipsum nobis eius dicta est obcaecati ab animi. Voluptatibus dolores natus sint enim fugiat. Sapiente voluptates enim officiis. Iste repudiandae illo nulla sed
      nam a ratione iure?</p>
  </div>
</div>

Answer 1

如果您不想切换到完全不同的技术(例如 flexbox(，您仍然可以轻松解决此问题：

• 将min-width应用于列而不是图像
• 从第二列中删除width和float
• 将overflow:hidden添加到第二列(这将防止文本进入图像下方(

第二部分

很重要，因为它允许第二列的内容只占用可用空间的"其余部分" - 因此，当由于最小宽度，第一列实际上不是 25% 宽时，当两列的宽度加在一起时，您最终不会超过 100%。