三列布局 css

实现如下图的三列布局:

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;
}
相关推荐
HWL56793 分钟前
使用CSS实现,带有动态浮动高亮效果的导航菜单
前端·css
GISer_Jing4 分钟前
AI Agent技能Skills设计
前端·人工智能·aigc·状态模式
大漠_w3cpluscom7 分钟前
使用 sibling-index() 和 if() 实现动态的 :nth-child()
前端
小江的记录本21 分钟前
【PageHelper】 【Spring Boot + MyBatis + PageHelper】 完整项目示例+PageHelper核心原理深度解析
java·前端·spring boot·后端·sql·spring·mybatis
JamesYoung797123 分钟前
第九部分 — 打包、调试和发布 发布前的打包与发布检查清单(Chrome 应用商店)
前端·chrome
多加点辣也没关系25 分钟前
Node.js 与 npm 的安装与配置(详细教程)
前端·npm·node.js
张3蜂26 分钟前
OpenClaw如何调用Cursor
前端·chrome
KIO no way26 分钟前
npm全局安装命令不可用解决方案
服务器·前端·npm·node.js
A923A27 分钟前
【Vue3大事件 | 项目笔记】第五天
前端·vue.js·笔记·前端项目
bugcome_com27 分钟前
全面入门 ASP.NET:从 Web Pages 到 MVC 与 Web Forms 的系统教程
前端·asp.net·mvc