我真的不是前端开发人员,但是
我该怎么做?
答案 0 :(得分:0)
可能有几种方法可以做到这一点,但这里有一对你。
使用浮点数的选项1:
将主要内容和红色边框视为两列。将它们浮起,给它们一个宽度并将它们放入容器中。
HTML
<div class="row">
<section>
<h1>Investing Magazine</h1>
<p>Your content here</p>
</section>
<aside>
<p>The side block here</p>
</aside>
</div>
CSS
.row:before, .row:after {
content: " ";
display: table;
line-height: 0; }
.row:after { clear: both; }
.row { *zoom: 1; }
section {
float: left;
width: 80%; }
aside {
float: left;
width:20%;
background: red; }
请参阅小提琴:http://jsfiddle.net/sntmW/
选项2使用定位:
将红色块完全放置在您想要的位置。
HTML
<section>
<h1>Investing Magazine</h1>
<p>Your content here</p>
</section>
<aside>
<p>The side block here</p>
</aside>
CSS
section { width: 80%; }
aside {
position: absolute;
width:20%;
top:0; right:0;
background: red; }
请参阅小提琴:http://jsfiddle.net/CHr7A/