HTML – 如何在我的网页上编码此布局？

概述我应该用什么代码来布局我的网页？ Layout http://i33.tinypic.com/246vs5j.jpg 编辑：不幸的是,这不是作业 – 我只是一个网络新手!!谢谢！ 箱子的高度/重量是固定的还是流动的？面板A有任何背景吗？ 最简单的方法： HTML <div id="container"> <div id="side"> panel A</div> <div id=" 我应该用什么代码来布局我的网页？

Layout http://i33.tinypic.com/246vs5j.jpg

编辑：不幸的是,这不是作业 – 我只是一个网络新手!!谢谢！

@H_404_14@解决方法 箱子的高度/重量是固定的还是流动的？面板A有任何背景吗？
最简单的方法：

HTML

<div ID="container">    <div ID="sIDe"> panel A</div>    <div ID="head"> panel B</div>    <div ID="content"> panel C</div></div>

CSS

#container{    wIDth: 100%;}#sIDe{    wIDth: 20%;    float: left;}#head{    wIDth: 80%;    float: left;}#content{    wIDth: 80%;    float: left;}

如果您具有面板A的背景,则应将其设置为容器,并从中继承.

编辑：

问：当A的内容短于/等于面板B时,如何确保面板C不会在面板A下滑动？
答：你有两个选择：
a)将B和C包装到包装器div：

HTML

<div ID="container">    <div ID="sIDe"> panel A</div>    <div >        <div ID="head"> panel B</div>        <div ID="content"> panel C</div>    </div></div>

b)玩填充;设置20％填充到容器,边距为-20％：

CSS

#container{    wIDth: 80%;    padding: 0 0 0 20%;}#sIDe{    wIDth: 20%;    float: left;    margin: 0 0 0 -20%;}

总结

以上是内存溢出为你收集整理的HTML – 如何在我的网页上编码此布局？全部内容，希望文章能够帮你解决HTML – 如何在我的网页上编码此布局？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。