html - 空间不足时将元素一个放在另一个下面

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 代码，因为它有 inline-css 等。

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

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

jsFiddle

第二种方式:(无媒体查询)

jsFiddle