-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 布局保持不变。这是某种搜索引擎优化。

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

This is possible by using float and the margin properties.

I simply floated your two divs to either side, and of course clear:both in the middle to stop them overlapping. Once done, I used margin-top with both positive and negative values to position the divs as if the first is below the second, when in fact the first is above the second in the code.

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>

Heres a fiddle demo for you!

于 2013-03-27T10:56:43.560 回答