Question

我需要将我的段落与我的图像并排。但是当空间不够时，我希望我的图像移到我的段落之下。

这怎么可能？

感谢。

        <div style="display: table;">
            <div style="display: table-row;">
                <div style="display: table-cell;">
                    <p style="min-width: 200px;">
                        Aaaaa aaaaa aaaa aaaaa aaa aaaaaaa aaaaa aa aaa aaaaaaa aaaaaaaaa aaaa aaaaa aaa aaaaaaa aaaaa aa aaa aaaaaaa aaaaaaaaa aaaa aaaaa aaa aaaaaaa aaaaa aa aaa aaaaaaa aaaaaaaaa aaaa aaaaa aaa aaaaaaa aaaaa aa aaa aaaaaaa aaaa
                    </p>
                </div>
                <div style="display: table-cell;">
                    <img style="width: 250px;" 
        src="http://i.telegraph.co.uk/multimedia/archive/03439/dude6_3439641b.jpg" />
                </div>
            </div>
        </div>

https://jsfiddle.net/cuga2xp5/

Answer 1

我设法更改了您的html code，因为它有inline-css等等。

第一种方式:(使用媒体查询）

@media all and (max-width: 300px) {
  p, #img {
    float: none;
    width: 100%;
}

<强> jsFiddle

第二种方式:(没有媒体查询）

<强> jsFiddle

Answer 2

使用flexbox和媒体查询。

应用String pattern = "href=\"([^\"]*\\.mp3[^\"]*)\"";代替display: flex
在550px的断点处使用媒体查询（由两个项目的最小宽度并排确定）将折弯方向更改为列。

Fiddle

<强>段

table-row

.ext {
  display: block;
}
.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.flexItem {
  display: inline-block;
}
.text {
  min-width: 200px;
  
}
.image {
  width: 250px;
}
@media only screen and (max-width: 550px) {
  .flex {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .text {
    max-width: 250px;
  }
}

Answer 3

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Align p and img</title>
<style>
  @media only screen and (max-width: 480px) {
 p{
   width: 100%;
 }
}
@media only screen and (min-width: 480px) {
  p{
    width: 40%;
    float:left;
  }
  img{
    float:right;
    clear:right;
  }
}
  </style>
</head>
<body>
  
<p>Aaaaa aaaaa aaaa aaaaa aaa aaaaaaa aaaaa aa aaa aaaaaaa aaaaaaaaa aaaa aaaaa aaa aaaaaaa aaaaa aa aaa aaaaaaa aaaaaaaaa aaaa aaaaa aaa aaaaaaa aaaaa aa aaa aaaaaaa aaaaaaaaa aaaa aaaaa aaa aaaaaaa aaaaa aa aaa aaaaaaa aaaa</p>
  					
<img style="width: 280px;" src="http://i.telegraph.co.uk/multimedia/archive/03439/dude6_3439641b.jpg" />
  
  
</body>
</html>

这是方法，你可以为不同的设备对齐文本和图像

当空间不足时，将元素一个放在另一个下面

3 个答案: