Question

我一直试图制作一个页面，每个图像两侧都有两个图像，每段图像都有一段文字。我希望每个段落都在他们的图像旁边，并且只是在页面中间停止，这部分我可以做。

但是，我还希望在调整窗口大小时移动文本，以便在高度增加时缩短宽度，以便仍然显示所有文本。

＆＃13;

<img src="http://placehold.it/100x100" style="float:left;width:100px;height:auto;"/>
<p>Text for Image 1</p>

<img src="http://placehold.it/100x100" style="float:right;width:100px;height:auto;"/>
<p>Text for Image 2</p>

＆＃13;

这很难解释，但我希望这会有所帮助。

[Image1] (text1) (text2) [Image2]

Answer 1

this你需要什么？

＆＃13;

 body{
  display:flex;
  align-items:flex-start;
}

div{ 
  display:flex; flex:1; 
}

div:nth-child(2n){
  justify-content: flex-end; 
}

p{
  padding:0 1em;
  margin:0;
}

＆＃13;

<div>
  <img src="http://placehold.it/250x150">
  <p>Lorem ipsum</p>
</div>
<div>
  <p>Lorem ipsum</p>
  <img src="http://placehold.it/250x150">
</div>

＆＃13;

两端的图像，中间有段落

1 个答案: