使用CSS更改div訂單

我遵循以下不能更改的HTML結構。它包含三個垂直div。我只想使用CSS來更改div的位置，以便第二個div出現在頂部，第一個和第三個div出現在這之後（只有重要的是第二個div應該出現在頂部）。使用CSS更改div訂單

我想使用下面的CSS代碼，它顯示第二個div在頂部，但隱藏第一個div。如何在此之後顯示其他兩個div？所有三個div都有不同高度。

HTML：

<div class="wrap"> 
    <div class="one"> 
     This should be third. 
    </div> 
    <div class="two"> 
     This should be first.  
    </div> 
    <div class="three"> 
     This should be second. 
    </div> 
</div>

CSS：

.wrap{ 
    width: 100px; 
    overflow: hidden; 
    position: relative; 
} 


.one, .two, .three{ 
    width: 100px; 
    margin-bottom: 10px; 
    background: yellow;  

} 

.two{  
    position: absolute; 
    top: 0; 
    background: green; 
}

的jsfiddle： http://jsfiddle.net/UK6vK/

來源

2012-10-16 user1251698

您可以更改CSS文件，但不能更改HTML？ – hjpotter92

你見過[this]（http://stackoverflow.com/q/220273/944681）嗎？ –

div的高度是否固定？ –

你用這種風格的代碼。一是和。三

.one, .three{ 
width: 100px; 
margin-bottom: 10px; 
background: yellow;  
float:right; 
}

和。二這種風格

.two{  
position: absolute; 
top: 0; 
background: green; 
left:0; 
width:100%; 
}

來源

2012-10-16 08:37:27

這些都不爲我工作組，但一對夫婦的調整，以賽義德的似乎 - 基本上覆制第二個div和使用它的佈局只，即，

HTML

<div class="wrap"> 
<div style="position:relative;" class="two"> 
    <strong>This should be first..</strong> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor diam eget lorem vehicula aliquam. Aliquam ac tellus eget justo facilisis malesuada. Curabitur mi sapien.</p>   
</div> 
<div class="one"> 
    <strong>This should not be first..</strong> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
</div> 
<div class="two"> 
    <strong>This should be first..</strong> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor diam eget lorem vehicula aliquam. Aliquam ac tellus eget justo facilisis malesuada. Curabitur mi sapien.</p>   
</div> 
<div class="three"> 
    <strong>This can be 2nd or third.</strong> 
     <p> Aliquam ac tellus eget justo facilisis malesuada. Curabitur mi sapien, bibendum sed eleifend non, pretium eget arcu. Vivamus et augue nec quam rutrum tempor in in urna. </p> 
</div> 
</div>

位置：相對於裝置其他的元件將用此元件被向下移位（其anyw ay出現在DIV的後面/之前，這個DIV已經向上移動了）。

CSS：

.one, .three{ 
width: 100%; 
margin-bottom: 10px; 
background: yellow;  
float:right; 
} 
.two{  
position: absolute; 
top: 0; 
background: green; 
left:0; 
width:100%; 
margin-bottom:10px; 
}

我知道你說的HTML無法改變這樣迂腐地講，這不是一個回答你的問題，但在我的情況的原因，我不能改變HTML結構是因爲我想要一個默認的移動佈局，當@media is screen and (min-width: 700px;)時重新訂購。除非我需要它來重新組織布局（不依賴於JS），否則我可以使虛擬div消失（z-index或其他）。

http://jsfiddle.net/UK6vK/83/

來源

2013-09-17 17:29:04 Chris

使用CSS更改div訂單

回答

相關問題