三列布局 css

实现如下图的三列布局:
在这里插入图片描述

.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;
}

相关推荐

  1. css3多布局

    2023-12-29 18:24:02       47 阅读
  2. 如何用css实现两布局?

    2023-12-29 18:24:02       33 阅读
  3. 使用 CSS 实现多布局

    2023-12-29 18:24:02       25 阅读
  4. CSS3多(详解网页多布局应用)

    2023-12-29 18:24:02       31 阅读
  5. CSS新手入门笔记整理:CSS布局

    2023-12-29 18:24:02       62 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-29 18:24:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-29 18:24:02       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-29 18:24:02       82 阅读
  4. Python语言-面向对象

    2023-12-29 18:24:02       91 阅读

热门阅读

  1. VS权限到期后咋办? — Visual Studio Product Keys

    2023-12-29 18:24:02       54 阅读
  2. Pthon Request库源码解读之__init__.py

    2023-12-29 18:24:02       51 阅读
  3. 华为鸿蒙应用--Toast工具(鸿蒙工具)-ArkTs

    2023-12-29 18:24:02       58 阅读
  4. 7天玩转 Golang 标准库之 os

    2023-12-29 18:24:02       57 阅读
  5. COMM394 Coding Literacy for Managers

    2023-12-29 18:24:02       58 阅读
  6. 算法系统学习(持续更新)

    2023-12-29 18:24:02       57 阅读
  7. 深入理解Dockerfile —— 筑梦之路

    2023-12-29 18:24:02       53 阅读
  8. GPT翻译水平探究:人工智能的语言艺术

    2023-12-29 18:24:02       55 阅读
  9. 23种设计模式学习

    2023-12-29 18:24:02       53 阅读