當空間不足時，將元素放置在另一個下方

我需要將我的段落與我的圖像並排放置。但是當空間不夠時，我希望我的圖像移動到我的段落下面。當空間不足時，將元素放置在另一個下方

這怎麼可能？

謝謝。

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

來源

2016-03-26 Bronzato

我設法改變你html code，因爲它有inline-css等

第一種方式：（有媒體查詢）

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

jsFiddle

方式二：（沒有媒體查詢）

jsFiddle

來源

2016-03-26 09:51:04 Pedram

感謝它與谷歌瀏覽器，但沒有與微軟邊緣，任何想法很好？ – Bronzato

無法使用IE11。 – Bronzato

兩種方式？ @Bronzato – Pedram

使用Flexbox的和媒體查詢。

應用的display: flex代替table-row
使用的媒體查詢在550px斷點（通過側兩個項目側的最小寬度所確定的），以在柔性方向改變爲列。

Fiddle

片段

.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; 
 
    } 
 
}

<div class="ext"> 
 
    <div class="flex"> 
 
    <div class="flexItem"> 
 
     <p class="text"> 
 
     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 class="flexItem"> 
 
     <img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03439/dude6_3439641b.jpg" /> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-03-26 09:52:54 zer00ne

非常感謝Google Chrome，但無法使用Microsoft Edge，有什麼想法？ – Bronzato

無法使用IE11。 – Bronzato

我相信準瀏覽器有點受限於flexbox ...我不得不爲IE瀏覽器弄虛作假。等一下。好的，更新。 – zer00ne

<!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> 
 
    \t \t \t \t \t 
 
<img style="width: 280px;" src="http://i.telegraph.co.uk/multimedia/archive/03439/dude6_3439641b.jpg" /> 
 
    
 
    
 
</body> 
 
</html>

這就是這樣，你可以讓文本和圖像對齊不同的設備

來源

2016-03-26 12:07:27 Manish62

當空間不足時，將元素放置在另一個下方

回答

相關問題