0

CSS

<style>
#layer1 {
    height: 60px;
    background-color:#00FF00;   
}
#layer2 {
    height: 60px;
    background-color:#FFFFCC;

}
</style>

HTML

<div id="layer1">
This is the first div.
</div>
<div id="layer2">
This is the second div.
</div>

質問

この HTML の構造を変更せず、CSS コードのみを変更した場合、ある div から別の div にコンテンツを移動することは可能ですか? 「This is the first div.」というテキストを移動したい。layer2に、 「これは最初の div です」というテキストを作成します。layer2の左側に表示し、「This is the second div.」というテキストを作成します。layer2の右側に表示します。

4

4 に答える 4

1

あなたの質問はあなたが求めていることを理解するのに脆弱であるため、javascriptなしでは不可能だと言う人もいます. しかし、私が理解している限り、あなたの質問はfloat: left;あなたの #layer1 と #layer2 にすることです。

これが最初のdivです。これは 2 番目の div です。

#layer1, #layer2{
float: left;
}

これを使用する可能性が高い場合は、float: left; #layer2 と float: right; へ。#layer1へ

これは 2 番目の div です。これは最初の div です。

#layer2{
float: left;
}
#layer1{
float: right;
}
于 2013-08-07T03:19:35.603 に答える
0

CSS3contentプロパティを使用できます。ただし、これはお勧めできません。コードが非常に奇妙に見えるからです。コンテンツを手動で移動するだけで、違いはありません。あなたの言っていることが理解できない場合を除き、その場合は明確にしてください。レスポンシブにしたい場合は、代わりに Javascript を使用してください。

于 2013-08-07T02:39:55.150 に答える
0

要素をこのように表示したいということであれば...

これが最初のdivです。これは 2 番目の div です。

...このような代わりに...

これが最初のdivです。

これは 2 番目の div です。

...その場合、これを行うために 2 つの間で「コンテンツを移動」する必要はありません。以下の例のようにプロパティを使用するdisplay:inline-block;と、使用している div 要素は、それぞれが新しい行で始まるのではなく、同じ行に配置されます。

#layer1,
#layer2 {
    display: inline-block;
}
于 2013-08-07T02:40:50.317 に答える