Question

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

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

注意：使用媒体查询不是我的选择。

*********  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，您仍然可以很容易地解决这个问题：

将main=""应用于列而不是图像
删除min-width＆amp;来自第二列的width
将float添加到第二列（这将阻止文字进入图片下方）

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

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

1 个答案: