Demonstration of the website's frame
大家好，是否可以移动div div标签的aqua div盒？有两个理想的地方。一个地方高于div＆＃39;文章＆＃39;在div＆＃39;包装内。另一个地方是div＆＃39;文章＆＃39;。这真让我发疯。请帮忙。非常感谢。 的 HTML：
<header>Header{width:100%;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
<nav>nav{max-width:960px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
</nav>
</header>
<div id="wrapper">wrapper{max-width:960px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
<article>article{max-width:960px;border: 1px solid;padding: 20px; margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
<div id="post_info">post_info{max-width:660px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
</div>
<div id="post_content">post_content{max-width:660px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
</div>
<div id="text_divider">text_divider{max-width:670px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
</div>
</article>
<div id="pagination">pagination{max-width:680px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
</div>
<div id="tags">tags{max-width:960px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
</div>
<footer>footer{} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
</footer>
</div>
CSS：
header, nav, #wrapper, article, #post_info, #post_content, #text_divider, #pagination, #tags, footer {
border: 1px solid;
padding: 20px;
margin: 20px auto;
}
span {
color: white;
}
header {
width:100%;
}
nav {
max-width:960px;
}
#wrapper {
max-width:960px;
}
article {
max-width:960px;
}
#post_info {
max-width:660px;
}
#post_content {
max-width:660px;
}
#text_divider {
max-width:670px;
}
#pagination {
max-width:680px;
}
#tags {
max-width:960px;
background-color: aqua;
}
#tags span {
color: aqua;
}
答案 0 :(得分：0)
article div高于<header>Header{width:100%;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
<nav>nav{max-width:960px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
</nav>
</header>
<div id="wrapper">wrapper{max-width:960px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
<div id="tags">tags{max-width:960px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
</div>
<article>article{max-width:960px;border: 1px solid;padding: 20px; margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
<div id="post_info">post_info{max-width:660px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
</div>
<div id="post_content">post_content{max-width:660px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
</div>
<div id="text_divider">text_divider{max-width:670px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
</div>
</article>
<div id="pagination">pagination{max-width:680px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
</div>
<footer>footer{} <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium turpis, eu fringilla ante mattis id. Quisque congue fermentum mauris id feugiat. Aliquam nibh nibh, laoreet a metus eu, ornare volutpat augue. Duis ante turpis, pharetra eget hendrerit eget, congue eget diam. Sed efficitur dolor vel sodales rutrum. Quisque viverra vitae dui pulvinar bibendum. Sed consectetur nibh vel accumsan ultricies. Nam dignissim interdum ultricies. Fusce elementum non turpis nec ultricies.</span>
</footer>
</div>
：
演示：http://jsfiddle.net/61sxephp/1/
BackgroundTask.cs答案 1 :(得分：0)
好的，移动整个<article>
高于<div id="wrapper">
wrapper{max-width:960px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum ...</span>
<div id="tags">
tags{max-width:960px;border: 1px solid;padding: 20px;margin: 20px auto;} <span>Lorem ipsum dolor ...</span>
</div>
<article>
<!-- code.. -->
{{1}}
答案 2 :(得分：0)
尝试使用以下css将'aqua'div放在'article'div -
上方{{1}}