2

我遵循无法更改的 HTML 结构。它包含三个垂直 div。我只想使用 CSS 更改 div 的位置，以便第二个 div 出现在最顶部，第一个和第三个 div 出现在这之后（唯一重要的是第二个 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/

4

2 回答 2

2

您将此样式代码用于 .one 和 .three

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

并设置为 .two 这种风格

.two{    
position: absolute;
top: 0;
background: green;
left:0;
width:100%;
}
于 2012-10-16T08:37:27.923 回答
1

这些都不适合我，但对 Saeed 的一些调整似乎 - 基本上复制第二个 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>

position:relative 表示其他元素将被此元素向下移动（无论如何它会出现在已向上移动的 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;)。我可以使虚拟 div 消失（z-index 或其他），除非我需要它来重新组织布局（不依赖于 JS）。

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

于 2013-09-17T17:29:04.923 回答