技术栈

三列布局 css

Ideaing~2023-12-29 19:49

实现如下图的三列布局:

javascript 复制代码
.box {
    width:1400px;
	margin:0 auto;
	padding-bottom:40px;
	> .left {
		float:left;
		width:180px;
		margin-top:100px;
		text-align:center;
	}
    > .center {
    	float:left;
    	margin-top:100px;
    	margin-left:130px;
    	item-box {
    	  float:left;
    	  text-align:left;
    	  margin-right:90px;
    	}
    }
    .right {
    	float:right;
    	margin-top:100px;
    }
}
注意:
// 最外层的box壳子上要加去除浮动的样式
.clearfix :after{
	content:'';
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
上一篇:Flask 密码重设系统
下一篇:ELF解析01 - ELF头和程序头
相关推荐
attitude.x
27 分钟前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java
31 分钟前
CSS3核心技术
前端·css·css3
空山新雨(大队长)
44 分钟前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术
1 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫
1 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓
1 小时前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java
1 小时前
CSS的文本样式
前端·css
前端小趴菜05
1 小时前
css - 滤镜
前端·css
祈祷苍天赐我java之术
1 小时前
理解 CSS 浮动技术
前端·css
热门推荐
01UV安装并设置国内源02A股预测还能更准?开源大模型Kronos带你跑通预测+回测全流程03解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题04UV 工具安装与国内镜像源配置指南05教你如何认证 Gemini 教育优惠的二次验证,薅个 1年的 Gemini Pro 会员06KGG转MP3工具|非KGM文件|解密音频07conda中设置镜像地址(附所有可换的地址)08突破百度网盘的下载限速,两种方法教会你【超详细】092025 年高教社杯全国大学生数学建模竞赛C 题 NIPT 的时点选择与胎儿的异常判定 完整成品思路模型代码分享,全网首发高质量!!!102025年数学建模国赛C题超详细解题思路