html - 打破文本行以提高响应能力

Question

我有一张图片，旁边有一些文字，图片和文字都在 wrapper 内居中，宽度为 70%。

在不同的屏幕尺寸上，特别是小屏幕上，文本位于图像下方。

我想将文本保留在图像旁边，当屏幕变小时，文本会分成更多行以适应宽度。

代码如下:

.wrapper{
    width: 70%;
    display: inline-block;
}

<div class="wrapper">
    <img class="pull-left" src="http://placehold.it/200">
    <div class="pull-left text-left">
        <h4>Lorem Lorem <br>
        Lorem Lorem
        </h4>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br> sed do eiusmod
tempor incididunt ut labore et dolore <br> magna aliqua. Ut enim ad minim veniam, <br>
        </span>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br> sed do eiusmod
tempor incididunt ut labore et dolore <br> magna aliqua. Ut enim ad minim veniam, <br>
        </span>
    </div> <!-- .pull-left -->
    <div class="clearfix"></div>
</div> <!-- .wrapper -->

这是一个用于查看和测试代码的 fiddle : https://jsfiddle.net/u8ajq2oh/

Answer 1

这是一个没有使用 bootstrap 的 fiddle 。

fiddle :https://jsfiddle.net/rmufb8L9/

.wrapper{
  margin-left: 15%;
	width: 70%;
	display: inline-flex;
  flex-direction:row;
  
}

img{height:min-content}

 <div class="wrapper">
	<img  src="http://placehold.it/200">
	<div class="text-left">
	  <h4>Lorem Lorem <br>
	Lorem Lorem</h4>
	  <span>
	  Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br> sed do eiusmod
tempor incididunt ut labore et dolore <br> magna aliqua. Ut enim ad minim veniam, <br>
	  </span>
	  <span>
	  Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br> sed do eiusmod
tempor incididunt ut labore et dolore <br> magna aliqua. Ut enim ad minim veniam, <br>
	  </span>
	</div>
</div>