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 -->

以下是查看和测试代码的小提琴： https://jsfiddle.net/u8ajq2oh/

Answer 1

这里是一个小提琴，没有使用引导程序来满足您的需求。

小提琴：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>

中断文本行以提高响应能力

1 个答案: