我对HTML5很新。现在我在第一篇文章中尝试两个段落。我使用了一些http://f6design.com/projects/parallax-scrolling/的片段。我只想在介绍文章中实现两个段落。我试过这个替代方案,但失败了。
<div class="side-container">
<!-- left side -->
<aside>
Left: Fixed width, 100% height of the window or right hand content
</aside>
<!-- main content -->
<article>
Right: Fluid width
</article>
</div>
这是我的代码
http://jsfiddle.net/sw8s4/
有什么建议怎么做?
最佳,
塞巴斯蒂安
答案 0 :(得分:1)
我会尝试这样的事情:
#content {
z-index: 4;
position: relative;
max-width: 900px;
padding: 0 10px;
margin: 0 auto;
line-height: 1.7;
}
#intro {
float:left;
width: 400px;
padding-right:40px;
}
#manned-flight {
width: 100%;
}
article img {
height:30px;
width:100%;
}
我不确定您的输出应该是什么样子,但这样您就会得到两列。 其中forst获得固定宽度,第二个调整大小以填充父级的其余部分。
更新您的jsfiddle
现在,您还可以将height:100%;
放在body
,#content
和#intro
上,使其达到窗口高度的100%。