使用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订单

回答

相关问题