2

変更できないHTML構造をフォローしています。3つの垂直divが含まれています。CSSのみを使用してdivの位置を変更して、2番目のdivが一番上に表示され、最初と3番目のdivがこの後に表示されるようにします（重要なのは、2番目のdivが一番上に表示されることだけです）。

次のCSSコードを使用しようとしています。上部に2番目のdivが表示されますが、最初のdivは非表示になります。この後、他の2つのdivを表示するにはどうすればよいですか？3つの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 に答える