网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

html如何进行三列布局

时间:2024-10-14 14:51:18

1、先在body标签中写三个div,<div class="left">300px</d足毂忍珩iv> <div class="middle">中间</div> <div class="right">200px</div>,如图:

html如何进行三列布局

2、加载样式css,详细代码,如图:

html如何进行三列布局

3、讲解一下上面css,对于左侧div(.left),宽300px,高500px,背景颜色,设置定位为绝对定位,离左侧为0px,离上侧为0px;右侧div(.right)差不多;中间div(.middle)不设置宽度,是自适应,只设置高度为500px,背景,主要的是margin值(这四个值分别指上 右 下 左)。

4、最后三列效果,如图:

html如何进行三列布局

5、优点:中间宽度自适应

© 2025 阿力知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com