html如何进行三列布局

 时间:2026-02-12 01:19:12

1、先在body标签中写三个div,

<div class="left">300px</div>

<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、优点:中间宽度自适应

1、先在body标签中写三个div,

<div class="container">

<div class="left">300px</div>

<div class="main">

<div class="middle">中间</div>

<div class="right">200px</div>

</div>

</div>

如图:

html如何进行三列布局

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

html如何进行三列布局

3、讲解一下上面css,对于最外层容器div(.container)宽800px,高500px,水平居中;左侧div(.left),宽200px,高500px,背景颜色,设置浮动定位,离上侧为0px;mian div包括了中间和右侧,设置浮动定位靠左排列;中间div(.middle)宽400px,高500p高度为500px,背景,设置浮动定位靠左排列;最后右侧和左侧差不多。

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

html如何进行三列布局

  • 实现整个html居中最简单方法
  • HTML怎么实现网页跳转
  • 如何在HTML中插入图片
  • html背景图片自适应屏幕大小
  • html点击按钮时切换图片的代码
  • 热门搜索
    新年手抄报简单又好看 病毒手抄报内容写什么 歌颂祖国的手抄报 我们的节日春节手抄报 普通话手抄报简单 元宵节手抄报大全 缅怀先烈手抄报简单又漂亮 关于生命的手抄报 一二年级防溺水手抄报 新年手抄报简单又漂亮