如何將div垂直放置在另一個Div的上方，在代碼中時Div是相反的順序

對於響應式設計更改，我需要將圖像垂直放置在文本下方而不是垂直放置在頂端。不過，我不能改變HTML的順序（注意，像目前的文本上運行下面的示例時：如何將div垂直放置在另一個Div的上方，在代碼中時Div是相反的順序

<div class="images"> 
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Metro_wagon_81-720.jpg/200px-Metro_wagon_81-720.jpg"> 
</div> 
<div class="text"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nisl leo. Etiam ipsum libero, hendrerit sit amet mauris ut, condimentum commodo magna. Ut ac orci orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu ante, vestibulum eu tortor non, imperdiet euismod libero.</p> 
</div>

這是我想達成的目標（這是一個PNG附件樣機）： enter image description here

來源

2014-01-20 fakeguybrushthreepwood

這可能不是非常有幫助，但你可以隨時改變你的HTML直接在JavaScript中使用DOM的順序。清空孩子，並按照你喜歡的順序重新添加。 –

您或許可以使用display: table-caption，這取決於您的具體情況。

你會需要包裝.images和.text在某種包含的元素，這是我們給display: table和caption-side: top的。然後將display: table-caption添加到您的.text div，它應該像魅力一樣工作。

這假定人造表格元素沒有其他問題，比如沒有和其兄弟姐妹一起玩。

的HTML看起來像這樣：

<div class="wrap"> 
    <div class="images"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Metro_wagon_81-720.jpg/200px-Metro_wagon_81-720.jpg"/> 
</div> 

<div class="text"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nisl leo. Etiam ipsum libero, hendrerit sit amet mauris ut, condimentum commodo magna. Ut ac orci orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu ante, vestibulum eu tortor non, imperdiet euismod libero.</p> 
</div> 

</div><!-- close wrap -->

CSS是這樣的：

.wrap { 
    display: table; 
    caption-side: top; 
} 

.text { display: table-caption }

這裏是一個小提琴：http://jsfiddle.net/eyesofjeremy/QjV4f/3/

這是基於brilliance from Jeremy Keith和我用它成功爲一個現場。當然，您需要將CSS放入相應的響應式媒體查詢中。

來源

2014-01-20 19:19:00

這比我的解決方案好得多:) – Arkana

謝謝@Arkana！ –

您可以在'wrap'中添加'width：100％'來製作與屏幕或其他容器一樣長的內容。 – Arkana

嘗試浮動離開了文本，並設置

width: 100%; 
display: block;

和float：none;

也許這會有所幫助。

來源

2014-01-20 17:52:57 taxicala

嗨，我在這裏試過，但它似乎沒有做任何事情：http://jsfiddle.net/nA6vV/ – fakeguybrushthreepwood

這個怎麼樣：

使用一個微小的CSS-WrapperClass並改變其值顯示：無;或者「display：block」，如果需要的話。

.someImg 
{ 
background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Metro_wagon_81-720.jpg/200px-Metro_wagon_81-720.jpg') no-repeat scroll 0 0 rgba(0, 0, 0, 0);width:200px;height:150px 

} 

._imageNormal 
{ 
display:block; 
} 

._imageMobile 
{display:none;} 


<div class="images top"> 
<div class="someImg _imageNormal"></div> 
</div> 
<div class="text center"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nisl leo. Etiam ipsum libero, hendrerit sit amet mauris ut, condimentum commodo magna. Ut ac orci orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu ante, vestibulum eu tortor non, imperdiet euismod libero.</p> 
</div> 
<div class="bottom someImg _imageMobile"></div>

它用作類_imageNormal和_imageMobile的開關。

編輯：

http://jsfiddle.net/kHk3B/

來源

2014-01-20 18:25:30 mercredo

我不明白......在你的小提琴中，圖像依然在文字的頂部。無論如何，我不知道如何顯示圖像或不能幫助改變位置... – Arkana

切換._imageNormal顯示：無和._imageMobile在媒體查詢中顯示：塊。運行良好，但也像頂部的標題解決方案一樣。 – mercredo

嗯，這個解決方案讓你的工作一點：在http://jsfiddle.net/QjV4f/2/

我漂浮在圖像（以使流斷裂）和手動定位它（在這種情況下， 5em頂部）。

然後，在文本中導致流程中斷（與position:absolute）。

這個問題，你肯定注意到了，它是它不是一個有用的解決方案，如果你的文本是動態的。

但是，如果文本具有固定長度，則可以開始調整某些媒體查詢以增加其他分辨率中的頁邊距。

您可以使用「float/margin-top」欺騙以及「position:absolute/top:x」，這兩部作品。

也許這是一個有點骯髒的解決方案...但沒有改變HTML或使用JavaScript我想不出另一個。

來源

2014-01-20 18:50:14 Arkana

你知道，正如我想的那樣，如果OP的圖像高度相同，這可能會奏效。你仍然需要一個包裝器，但是你可以做pos：rel包裝，其底部填充等於圖像高度，pos：絕對包含在IMAGE而不是TEXT。雖然有點不靈活。 –

是的，我認爲用你提到的包裝方式會更好。謝謝，在網站上很高興有人關心正確的事情，想要學習和幫助:) – Arkana

我覺得Vivek的意思是使用position屬性。 .images和.text div上面是否有父級div？一個容器div的某種？如果是這樣，您可以將父級設置爲position：relative和.images和.text至position：absolute，然後使用css來定位它們。否則，您可以將position：absolute設置爲兩個div，並且它對於其父項或body標記是絕對的。

來源

2014-01-20 19:03:07

是的，這就是我說的第一件事，我們在CSS學習......所以在發佈aq之前至少人應該做一些研究... –

fakeguy：檢查這個小提琴。 http://jsfiddle.net/jnLdk/這使用位置屬性將文本下面的圖像。 –

這裏有一種方法重新整理利用CSS which works in newer browsers which support flexbox HTML元素，這包括的iOS，Android和Windows Phone瀏覽器（這種響應式設計的常用指標）：

body { 
    display: flex; 
    flex-flow: column; 
} 
div.images { 
    order: 2; 
}

這裏有一個jsFiddle 。

來源

2014-01-20 19:36:21

如何將div垂直放置在另一個Div的上方，在代碼中時Div是相反的順序

回答

相關問題