1

次のHTMLコードを想像してみてください。

   <html>
    ...
    <div id="stuff1">
        barbaz
    </div>

    <div id="stuff2">
        foobar
    </div>
    ...
   </html>

ここで、CSSを使用して stuff2上記のように表示するとしますstuff1。position: absoluteHTMLコードを使用せずに変更せずにこれを行う方法はありますか？

私はfloatこのように使用してみました：

#stuff2 { float: left; }
#stuff1 { clear: left; }

しかし、うまくいきませんでした。を使用しない場合と同じ floatです。

4

2 に答える 2

1

最初に2番目の要素を取得することに成功しましたが、期待どおりに次の行では取得できませんでした。

#stuff1{display:inline-block;/* or display: inline; */}
#stuff2{float:left;}

Working Fiddle

またはその他

transformCSS3プロパティを使用することもできます

#stuff1{
    background-color:red;
    transform: translate(0px, 100px);
    -webkit-transform: translate(0px, 100px);
    -moz-transform: translate(0px, 100px);
    -o-transform: translate(0px, 100px);
    -ms-transform: translate(0px, 100px);
}
#stuff2{
    background-color:green;
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
}

Working Fiddle

また、翻訳とポジショニングの間のパフォーマンスグラフについては、このPaulIrishのWebサイトを確認してください。

高さがわからない場合は、javascriptまたはjQueryを使用して高さを計算します。

于 2013-03-25T15:54:38.340 に答える
1

cssの下で試してみてください、これは私たちが助けになるかもしれません

#stuff2 { float: left;  margin-top: -40px; }   
#stuff1 { clear: left; margin-top: 30px; }
于 2013-03-26T11:39:17.707 に答える