-1

次のhtmlコード（jsFiddle）があります：

<div class="content">
    <div class="first-block">
        Mauris at tortor vel nulla rutrum porta. Etiam non ...
    </div>
    <div class="second-block">
        Suspendisse suscipit tortor eu nulla interdum ...
    </div>
</div>

CSSでfirst-block後のページに表示することは可能second-blockですか？視覚的にのみ、HTMLレイアウトは同じままです。それはある種のSEOです。

4

2 に答える 2

1

これは、絶対位置を使用する場合に可能です。ただし、レイアウトを壊さないようにするには、事前定義された高さが必要です

.content {
    width: 400px;
    height:200px;
    margin: 0 auto;
    position:relative;
}

.first-block {
    background: coral;
    position:absolute;
    bottom:0;
}

.second-block {
    background: #DEDEDE;
    position:absolute;
    top:0;
}

これがjsFiddleのデモです

于 2013-03-27T10:27:57.567 に答える
1

これはfloat、marginプロパティを使用することで可能になります。

私は単にあなたの2つdivsをどちらかの側に、そしてもちろんclear:bothそれらが重なるのを防ぐために真ん中に浮かせました。完了したらmargin-top、正と負の両方の値を使用してdivs、最初の値が2番目の値より下にあるかのように配置しましたが、実際には、コード内で最初の値が2番目の値より上にあります。

CSS

.content {
    width: 400px;
    margin: 0 auto;
}

.first-block {
    background: coral;
    margin-top:300px;
    float:left;
}

.second-block {
    background: #DEDEDE;
    margin-top:-300px;
    float:right;
}

HTML

<div class="content">
    <div class="first-block">
        Mauris at tortor vel nulla rutrum porta. Etiam non condimentum velit. Phasellus turpis magna, sagittis at porta et, tincidunt id magna. Maecenas hendrerit suscipit massa, at consectetur magna tempor et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Etiam accumsan.
    </div>
    <div style="clear:both;"></div>
    <div class="second-block">
        Suspendisse suscipit tortor eu nulla interdum sit amet ultricies ante imperdiet. Donec varius adipiscing lectus in suscipit. Nunc risus arcu, luctus nec tempor porttitor, sodales eget lectus. Vestibulum imperdiet massa in ligula pellentesque eget egestas dui facilisis. Nunc commodo lacus at nibh tristique sodales
    </div>
</div>

これがあなたのためのフィドルデモです！

于 2013-03-27T10:56:43.560 に答える