百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

两栏布局、左边定宽200px、右边自适应如何实现?

yuyutoo 2025-04-06 00:10 12 浏览 0 评论

一、两栏布局(左定宽,右自动)
1. float + margin

即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。

举例:

HTML代码:



我是左栏


我是右栏

CSS代码
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
margin: 10px;
}
.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
margin-left: 220px;
background-color: green;
}

二、position + margin

即在父标签设置position属性为relative;子标签中定宽元素设置position属性为absolute;自适应元素设置margin属性,margin-left>=定宽元素宽度。

举例:

HTML代码



我是左栏


我是右栏



CSS代码

html,body,div{
margin: 0;
padding: 0;
}
.wrap{
margin: 10px;
position: relative;
}
.wrap_left{
position: absolute;
width: 200px;
background-color: red;
}
.wrap_right{
margin-left: 220px;
background-color: green;
}
3.float + 负margin

即给自适应宽度元素定义一个父标签,并设置float属性为left;width为100%;自适应宽度元素设置margin,margin-left应>=定宽元素宽度;

固定宽度元素设置margin-left属性为负值:-100%;

除此之外应注意HTML结构中应先写自适应元素,再写固定宽度元素。

举例:

HTML代码



我是右栏



我是左栏

html,body,div{
margin: 0;
padding: 0;
}
.wrap{
float: left;
width: 100%;
}
.wrap .wrap_right{
margin-left: 220px;
background-color: green;
}
.wrap_left{
float: left;
width: 200px;
margin-left: -100%;
background-color: red;
}
注:使用的float属性,必要时清除一下浮动。

二、三栏布局

掌握了上面的方法,我们会发现制作一个三栏布局也是非常容易的。

下面我们在上面栗子的基础上,看看实现一个两侧定宽,中间自适应的三栏布局如何实现

1. float + margin(两侧定宽,中间自适应)

HTML代码:

我是左栏

我是右栏

我是中间栏

html,body,div{

margin: 0;

padding: 0;

}

.wrap_left{

width: 200px;

float: left;

background-color: red;

clear: both;

}

.wrap_content{

margin-left: 220px;

margin-right: 220px;

background-color: yellow;

}

.wrap_right{

width: 200px;

float: right;

background-color: green;

}

2. position + margin(两侧定宽,中间自适应)

HTML代码:

我是左栏

我是右栏

我是中间栏

css代码

html,body,div{

margin: 0;

padding: 0;

}

.wrap_left{

width: 200px;

position: absolute;

background-color: red;

left: 0;

}

.wrap_content{

margin-left: 220px;

margin-right: 220px;

background-color: yellow;

}

.wrap_right{

width: 200px;

position: absolute;

right: 0;

background-color: green;

}

3.float + 负margin(两侧定宽,中间自适应)

HTML代码

我是中间栏

我是左栏

我是右栏

CSS代码

html,body,div{

margin: 0;

padding: 0;

}

.wrap{

float: left;;

width: 100%;

}

.wrap_left{

width: 200px;

float: left;

margin-left: -100%;

background-color: red;

}

.wrap_content{

margin-left: 220px;

margin-right: 220px;

background-color: yellow;

}

.wrap_right{

width: 200px;

float: left;

margin-left: -200px;

background-color: green;

}

文/丁向明

做一个有博客的web前端自媒体人,专注web前端开发,关注用户体验,加我qq/微信交流:6135833

http://dingxiangming.com

相关推荐

深度解读Spring框架的核心原理

深度解读Spring框架的核心原理在Java开发的世界里,提到Spring框架,就像提起一位久经沙场的老将,它几乎成了企业级应用开发的代名词。那么,这个被无数开发者膜拜的框架究竟有何独特之处?今天,我...

「Spring认证」Spring 框架概述

Spring是最流行的企业Java应用程序开发框架。全球数以百万计的开发人员使用SpringFramework来创建高性能、易于测试和可重用的代码。Spring框架是一个开源的Java...

学习Spring框架 这一篇就够了

1.spring概述1.1Spring是什么(理解)...

Spring框架双核解析:IOC与AOP的本质与实战

#Spring核心#IOC容器#AOP编程#Java框架设计...

Spring Boot与传统Spring框架的对比:探索Java开发的新境界

SpringBoot与传统Spring框架的对比:探索Java开发的新境界在Java生态系统中,Spring框架无疑是一个里程碑式的存在。从最初的简单依赖注入容器,到如今覆盖企业级开发方方面面的庞大...

Spring MVC框架源码深度剖析:从入门到精通

SpringMVC框架源码深度剖析:从入门到精通SpringMVC框架简介SpringMVC作为Spring框架的一部分,为构建Web应用程序提供了强大且灵活的支持。它遵循MVC(Model-V...

Spring框架入门

一.spring是什么?Spring是分层...

程序员必知必会技能之Spring框架基础——面向切面编程!

面向切面编程AOP(AspectOrientedProgramming)与OOP(ObjectOrientedProgramming,面向对象编程)相辅相成。AOP提供了与OOP不同的抽象软件结...

Spring Security安全框架深度解读:为你的应用穿上“钢铁铠甲”

SpringSecurity安全框架深度解读:为你的应用穿上“钢铁铠甲”在现代网络世界里,保护我们的应用程序免受各种威胁攻击至关重要。而在这个过程中,SpringSecurity框架无疑是我们最可...

Spring框架的设计哲学与实现:打造轻量级的企业级Java应用

Spring框架的设计哲学与实现:打造轻量级的企业级Java应用Spring框架自2003年诞生以来,已成为企业级Java应用开发的代名词。它不仅仅是一个框架,更是一种设计理念和哲学的体现。本文将带你...

Spring框架深度解析:从核心原理到底层实现的全方位避坑指南

一、Spring框架核心概念解析1.控制反转(IoC)与依赖注入(DI)Spring的核心思想是通过IoC容器管理对象的生命周期和依赖关系。传统开发中,对象通过new主动创建依赖对象,导致高耦合;而S...

Java框架 —— Spring简介

简介一般来说,Spring指的是SpringFramework,它提供了很多功能,例如:控制反转(IOC)、依赖注入...

Spring 框架概述,模块划分

Spring框架以控制反转(InversionofControl,IoC)和面向切面编程(Aspect-OrientedProgramming,AOP)为核心,旨在简化企业级应用开发,使开发者...

spring框架怎么实现依赖注入?

依赖注入的作用就是在使用Spring框架创建对象时,动态的将其所依赖的对象注入到Bean组件中,其实现方式通常有两种,一种是属性setter方法注入,另一种是构造方法注入。具体介绍如下:●属性set...

Spring框架详解

  Spring是一种开放源码框架,旨在解决企业应用程序开发的复杂性。一个主要优点就是它的分层体系结构,层次结构让你可以选择要用的组件,同时也为J2EE应用程序开发提供了集成框架。  Spring特征...

取消回复欢迎 发表评论: