如何在保持响应性的同时避免浮动图像旁边的段落文本中断？答案

【问题标题】：How to avoid text break of paragraph next to floated image while preserving responsiveness?如何在保持响应性的同时避免浮动图像旁边的段落文本中断？
【发布时间】：2015-01-26 23:16:11
【问题描述】：

我正在使用带有 LESS 的最新 Bootstrap。

我已经建立了一个文章网格，其中包含一个浮动到左侧的图像和一个段落：

HTML：

<!-- featured articles -->
    <div id="featured-articles" class="container">


      <!-- row -->
      <div class="row">

        <div class="col-md-6">

          <img src="http://placehold.it/265x150">

          <h4>Article Header</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex... <a href="#">Read More</a></p>

        </div>


        <div class="col-md-6">

          <img src="http://placehold.it/265x150">

          <h4>Article Header</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex... <a href="#">Read More</a></p>

        </div>

      </div><!-- row -->

</div><!-- /featured articles -->

少：

#featured-articles {


    padding-bottom: 25px;

    img {
        display: block;
        margin: 0 auto;
        padding-bottom: 15px;
        clear: both;
    }

    p {
        text-align: justify;
    }

    h4 {
        margin-top: 0px;
    }


    @media (min-width: @screen-sm-min) {

        img {
            float: left;
            padding-right: 10px;
            padding-bottom: 0px;
        }

        .col-md-6 {
            padding-bottom: 25px;
            margin-bottom: 25px;
        }

    }

}

现在的问题是，在某些较小的分辨率下，右边的文本开始中断，而不是保持段落的对齐：

有没有办法在保持响应的同时保持文本良好对齐而不是中断？

【问题讨论】：

标签： html css twitter-bootstrap less

【解决方案1】：

通常你会换行并设置一个margin-left。在这种情况下，大约 270 像素。

p {
    text-align: justify;
    margin-left: 270px;
}

这是一个例子： http://jsfiddle.net/f7ohrLrs/

【讨论】：

【解决方案2】：

在我看来，在较小的分辨率上，您的文本似乎在缩小，但您的图像大小保持不变，因此文本试图通过缩小来为自己腾出空间。

您可以尝试在您的img 标签上使用img-responsive 类

<img src="..." class="img-responsive" alt="Responsive image">

欲了解更多信息：http://getbootstrap.com/css/#images

【讨论】：

图像响应不是这里的问题。问题是图像旁边的文本段落应该保持对齐而不是在图像下方流动。
当您以较小的分辨率查看图像时，您的图像尺寸是否会减小，而您的文字位于图像下方？如果没有，请尝试在img 标签上添加img-responsive 类，这将根据分辨率缩放图像，为文本腾出空间。