两栏布局

最新推荐文章于 2020-03-01 12:50:30 发布
最新推荐文章于 2020-03-01 12:50:30 发布
阅读量162 收藏
点赞数
分类专栏： 计算机语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pishubing/article/details/104326715
版权

①先定位过去

②被压住的部分让出来这个距离

先创造出来一个right区域，然后创造出来一个left区域

在这里插入图片描述
先创建的这个div中设position：absolute;这样第二行的div就能跑到第一行。如果想让粉色在右边那么让right=0;并且这一行要腾出粉色的地，不能是在黑色独成一行的前提下，既让黑色的margin-right=粉色的width即可。
在这里插入图片描述
效果图：
在这里插入图片描述

PiShubing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现两栏布局的几种方式
Dear
12-11 965
什么是布局 布局简单来说就是如何排列页面中各部分的内容 那么，如何排列呢？ 页面中常见的布局 单列布局 等宽的单栏布局 中间内容略窄的单栏布局 两栏布局（一遍定宽、另一边自适应） 通过 float + overflow 来实现 通过 position 实现 通过 float + calc 来实现 通过 flex 来实现 三栏布局（左右两边定宽、中间内容自适应） 通过 float 来...
BFC实现自适应两栏布局
01-20
BFC可以帮助我们解决许多布局问题，比如**高度塌陷**，并能实现如自适应两栏布局等复杂的布局模式。 ### 1. BFC的触发条件 BFC的触发条件包括但不限于以下几种： - **根元素**，即HTML文档的`<body>`标签。 - **...
实现两栏布局
EIERICA的博客
10-18 238
几个实现两栏布局的方法（左侧固定，右侧自适应） 一、position（定位） <!doctype html> <html> <head> <meta http-equiv="ContentType" content="text/html;charset=utf-8"> <title>两栏布局</title> ...
CSS-四种两栏式布局
weixin_40122996的博客
08-27 5642
四种两栏式布局 先分别介绍float、position、flex和table 1.float属性指定一个盒子（元素）是否应该浮动。 在早期浏览器当中，文档类型基本都是图片加文字进行页面展示。float属性最开始的设计是想让文字环绕图片 例如这样： 而开发人员无意中利用它做了一些本不应该是float设计时的工作，于是早期的页面布局一般都是float布局。例如让两个块级盒子在一行...
页面两栏布局
优雅的博客
05-11 1万+
相关知识点 1.javascript变量包含两种不同数据类型的值：基本类型和引用类型。 基本类型值指的是简单的数据段，包括es6里面新增的一共是有6种，具体如下：number、string、boolean、null、undefined、symbol。 引用类型值指那些可能由多个值构成的对象，只有一种如下：object。 在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。...
左右两栏布局右侧自适应+左右拖动改变两栏宽度
09-25
在网页设计中，创建左右两栏布局并且支持用户通过拖动改变两栏宽度是一种常见的交互方式，这可以提供更灵活的界面体验。本示例主要涉及的技术点包括HTML基础、CSS布局以及JavaScript事件处理。 首先，HTML结构是...
Typecho两栏布局主题
08-10
"Typecho两栏布局主题"是一个专门为Typecho设计的，旨在提供更丰富展示空间和更好用户体验的定制主题。这种两栏布局通常指的是页面左侧为主要内容区域，右侧为辅助信息如侧边栏、广告或导航菜单等。 在创建或修改...
四种两栏布局自适应 ｜ float\bfc\flex\absolute
02-18
四种两栏布局 ｜ 1. float + margin 2. float + bfc 3. flex 4. 父相对子绝对
两栏布局和三栏布局干货整理
眼里长着太阳，笑里全是坦荡
07-12 353
一、两栏布局1）浮动布局：边栏浮动，主栏留出相应的margin （边栏宽度）&lt;div id = "aside"&gt; &lt;/div&gt; &lt;div id = "main"&gt; &lt;/div&gt;div{ height:500px; } #aside{ width:300px; background-color:yellow; float:left; }...
用CSS实现布局（两栏布局，多栏布局）
u010565037的博客
02-17 6015
在网页上的布局比较经典的是两栏布局和三栏布局。 两栏布局 两栏布局是主内容区为主，左（右）侧有一栏，代码如下： style> #header, #footer{ height: 100px; background: red; } #content
两栏等高布局||两栏自适应高度
轻功与猫
02-24 4904
常用两栏等高布局三种方法 这里梳理一下三种常用的两栏等高布局方法，如有谬误，欢迎指正 -、margin-bottom和padding-bottom html hello hello hello hello world css .f{float:left} div{overflow:hidden;//这句特别重要} p{width:200px} #p1 { ma
css两栏布局
木木
08-20 3393
1.浮动布局 左侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度。 &lt;div class="one"&gt;&lt;/div&gt; &lt;div class="two"&gt;&lt;/div&gt; .one{ float: left; wid...
Integer.parseInt()什么意思？
热门推荐
PiShubing的博客
09-22 10万+
java中的语句integer.parseint（)是将整型数据Integer转换为基本数据类型int 例子： String str = ＂3＂; int i = Integer.parseInt(str); System.out.println(i+1)；//输出4; String str = ＂3＂; System.out.println(str+1);//output 31; integer...
html基础知识
PiShubing的博客
02-11 1万+
html hyperText markup Language! 超文本标记语言 （1） 其中html跟标签 head body是结构化标签 charset是编码字符集 （1）utf-8最常用 (2) gbk国家标本扩展版本（包含亚裔版本，和繁体字符集） （3）unicode万国码 lang=“en,zh” 注释：language en=english zh=...
什么是三目运算符？对三目运算符的理解
PiShubing的博客
09-22 6260
对于有些选择分支结构,可以使用简单的条件运算符来代替. 如: if(a<b)     min=a; else     min=b; 可以用下面的条件运算符来处理 min=(a<b)?a:b; 其中"(a<b)?a:b"是一个"条件表达式",它是这样执行的:　　如果a<b为真,则表达式取a值,否则取b值. 　　条件运...
随便输入一段字符串，把其中连续出现次数最多的字符找出来并统计出连续出现的字符次数
PiShubing的博客
02-18 2014
根据题目可知，要统计出来出现次数最多的字符；并且统计出此字符出现的次数。所以定义一个变量char ch来记录此字符。 下面是我自己敲的代码： for循环中判断条件为str.length()-1是因为要进行当前字符与下一个字符的比较，所有没有必要遍历到字符串的最后一个位置。如果当前字符与下个字符相同则将当前字符的出现次数进行累加。如果不同，则进行判断，看当前字符的连续出现次数是否比之前保持记录...
包装类和重写toString()方法
PiShubing的博客
03-01 1316
包装类： Java增强的包装类： Java是面向对象编程语言，但同样提供了8种基本数据类型，这8种基本数据类型不支持面向对象的编程机制，基本数据类型同样也不具备“对象”的特征：没有Field成员变量、没有方法可以被调用。 8种基本数据类型带来一定的方便性，即：可以进行简单、有效的常规数据处理。但在某些时候基本数据类型会有一些制约。例如：所有的引用类型的变量都继承Object类，都可以当成Objec...
flex实现两栏布局
最新发布
08-15
要使用flex实现两栏布局，你可以使用flex布局的属性来实现。具体的实现方式有多种，以下是其中的一种方法： 首先，在父元素上应用flex布局属性，比如设置display为flex，这样父元素的子元素就可以通过flex属性进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值