CSS之两栏固定布局（二）

最新推荐文章于 2022-07-06 14:53:01 发布
最新推荐文章于 2022-07-06 14:53:01 发布
阅读量255 收藏
点赞数
分类专栏： css 文章标签： css

3. 负margin布局

这里写图片描述

3.1

HTML:

这里写图片描述

- 页面分为三个部分，头部（div#header）、主体（div#page）、脚部（div#footer），同样在这三个容器中使用了内容器（div.container）用来控制内容的居中

负margin布局，从字面上大家都能知道是使用元素的负margin来实现布局。其实更简单点理解就是使用元素的margin配合float的方向，从而达到我们需要两栏布局效果

这里写图片描述

这里写图片描述

这里设置浮动和width

这里写图片描述

tian361zyc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单的DIV+CSS布局示例
12-11
简单的DIV+CSS布局示例
实现两栏布局(左边固定，右边自适应)的六种方法
qq_43456687的博客
04-12 4019
html内容如下 <div class="wrap"> <div class="left">left</div> <div class="right">right</div> </div> 方法一：利用float .left { float: left; width: 200px; background-color: pink;
两栏布局的四种实现方法
weixin_44164982的博客
07-16 3607
两栏布局 这个设置宽高浮动/绝对定位。一个自适应不设置宽，只设置高度，自适应的那个用margin留出固定宽度那个盒子的空间就可以。
【CSS】实现两栏布局的方式
weixin_47750287的博客
05-04 4109
【CSS】实现两栏布局的方式 一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应。两栏布局的具体实现有以下几种方式： ① 利用浮动 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。 将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。 .container { height: 100px; } .left { float: left; width: 200px; height: 100px; background:
css二列布局和多列布局
KING
01-06 1894
设置为float的形式 .left{ width:20%; height:500px; float:left; background:#ccc; } .right{ width:20%; height:500px; float:right; background:#ddd; } .center{ widt
css实现两栏固定中间自适应的方法
09-22
主要介绍了css实现两栏固定中间自适应的方法，主要介绍了4种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS 三栏等高布局实现方法
09-25
实现三栏等高布局需要使用 XHTML 和 CSS 两种技术。我们可以使用 float 属性来让三个栏目浮动在一起，并且使用 padding-bottom 和 margin-bottom 属性来实现等高布局。最后，我们可以使用 position: relative; 属性...
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
首先，让我们回顾一下传统的三栏布局，也就是左右两栏固定宽度，中间一栏自适应宽度的布局。这种布局常用于网站的主体内容展示，左侧可能包含导航菜单，右侧放置辅助信息，中间则是主要内容。一个简单的实现方式是...
CSS Float布局过程与老生常谈的三栏布局
12-08
描述中提到，CSS布局有两种主要方法：使用`position`属性和使用`float`属性。`position`常用于固定或绝对定位元素，适合布局内容较少、结构固定的首页；而`float`更适合动态内容，如博客模板，因为它允许内容自然...
CSS布局之圣杯布局与双飞翼布局
09-24
圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。接下来通过本文教程给大家介绍CSS布局之圣杯布局与双飞翼布局，感兴趣的朋友一起学习吧
两栏布局的几种方法
chord_fish的博客
07-04 905
两栏布局左自适应右固定。 （1）左浮动，右固定 左边浮动，右边利用margin - left将右边的盒子顶出去，自适应添加了剪切效果 .main{ padding: 0; margin: 0; height: 100px; } .left{ float: left; width:100px; height: 100px; background: red; f
实现常用的两栏布局(左侧固定+右侧自适应)以及三栏布局(圣杯布局和双飞翼布局)
Younguys
07-06 2115
两栏布局和三栏布局是我们常用到的布局形式，下面我们分别进行实现和总结。现在有以下 DOM 结构： （1）利用浮动，左边元素宽度固定 ，设置向左浮动。将右边元素的 设为固定宽度 。注意，因为右边元素的 默认为 ，所以会自动撑满父元素。 （2）同样利用浮动，左边元素宽度固定 ，设置向左浮动。右侧元素设置 这样右边就触发了 ， 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。 (3) 利用 布局，左边元素固定宽度，右边的元素设置 。 (4）利用绝对定位，父级元素设为相对定位。左边元素 定位，
HTML基础——头部与主体
JEYMING的博客
05-11 2931
&amp;lt;!-- Html基础 html文档由头部head和主体body两部分组成 head——定义标题、样式等 body——定义段落、标题字、超链接、脚本、表格、表单等 --&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;!-- 主要包含标题标记、元信息标记、样式标记、脚本标记、超链接标记等
CSS：两栏布局，三栏布局
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
02-15 9675
两栏布局方法一：浮动布局<div id = "aside"> </div> <div id = "main"> </div> div{ height:500px; } #aside{ width:300px; background-color:yellow; float:left; } #main{ background-color:aqua; margin-left:300
css 实现div内显示两行或三行，超出部分用省略号显示
热门推荐
树洞树洞-单纯记录
02-13 9万+
一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;二、div内显示两行或三行，超出部分用省略号显示 overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
css两栏布局
木木
08-20 3397
1.浮动布局 左侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度。 &lt;div class="one"&gt;&lt;/div&gt; &lt;div class="two"&gt;&lt;/div&gt; .one{ float: left; wid...
HTML5+CSS3-背景渐变、多栏布局column
张新丁
05-31 1634
（13）背景渐变 语法：background:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#000)); 第一个参数：渐变类型---线性渐变 第二个参数：分别为 X,Y轴方向渐变的起始位置 第三个参数：分别为 X,Y轴方向渐变的终止位置 第四个参数：设置起始位置的颜色 第五个参数：设置终止位置的颜色   （14）column--...
两栏布局的几种实现方式
qq_33680352的博客
12-06 2499
两栏布局的几种实现方式 通过以下四常见的方法均可以实现图中两栏布局的效果 侧边栏左浮动+正文部分overflow：auto 定位实现两栏布局 纯浮动形式 浮动+常规流 效果图 侧边栏左浮动+正文部分overflow：auto 代码部分 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
两栏布局和三栏布局
王小五的博客
09-18 970
两栏布局和三栏布局 两栏布局 <div class="wrapper"> <div class="left">我是文字测试君</div> <div class="right">我是文字测试君</div> </div> 1.浮动方法float 给固定宽度的一方设置浮动，给自适应的一方设置100%宽度值，用浮动控制左右宽固固定或自适应 <style> .left {
css flex左右三栏布局
最新发布
10-09
实现左右三栏布局可以使用 CSS Flexbox。其中，左侧和右侧列可以设置为固定宽度，中间列则设置为自动宽度，如下所示： HTML： ```html 左侧内容 中间内容 右侧内容 ``` CSS： ```css .container { display...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值