《精彩绝伦的CSS》——布局（五）两栏布局

最新推荐文章于 2022-07-12 10:50:49 发布
最新推荐文章于 2022-07-12 10:50:49 发布
阅读量291 收藏
点赞数
分类专栏： 一书一进步
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luoluolun/article/details/70209700
版权

五、两栏布局

使两栏文本并排在一起非常简单，使他们浮动即可，通过float:left;和float:right;可控制某一栏置左还是置右


luoluolun
关注
专栏目录
前端面试之轻松实现CSS两栏布局的几种方式(实践有效）
Sunday97的博客
06-12 1453
这里实现得两栏布局是左边部分的宽度固定，右边部分的宽度自适应 其效果就如下图，在浏览器屏幕大小变化的过程中，左边块的大小是不变的，右边块的宽度是自适应的。 实现方法有以下几种： 1通过设置浮动实现。需要两个div实现，一个div设置浮动，并设置宽度，另一个div不用设置任何东西 如果要给右边块设置什么的话下面两种方法也行： (left左浮动并设置宽度right设置margin-left为lef...
html左右两栏式布局
热门推荐
wujingj的博客
05-09 3万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--方法一： 混合浮动+普通流 --> <style&g
左右两栏布局写法
前端精髓
12-28 8810
实现两栏布局：浮动布局，flex布局，grid布局
《精彩绝伦的CSS》——布局（二）居中块状框
luoluolun的博客
04-17 243
二、居中块状框 最容易理解的就是，给一个固定宽度的父元素内的子元素居中，只需确定子元素宽度，接着计算子元素左右需留出多少空白用子元素的外边距或者父元素的内边距都可以轻松解决。如： div#contain{width:800px;} div#main{width:760px;margin:0 20px;} 还有一种情况是，有一个固定宽度的元素，但不知道容器有多大。这时仍可以使用外边距实现
《精彩绝伦的CSS》——布局（三）遏制浮动
luoluolun的博客
04-17 354
三、遏制浮动 若一个容器中的元素全部采用浮动，则该容器如果没有自适应包裹内容其高度就会为0。 如下： div#container{ border: 2px dashed gray; background-color: #9AC; } div.colum{ float: left; width:28%; padding: 0 1%; margin: 0 1%;
《精彩绝伦的CSS》——布局（四）清除浮动
luoluolun的博客
04-17 202
四、清除浮动 1、清除浮动最最简单的方式就是在文档中插入一个元素，并设置它的clear属性。 div class="colum one">...div> div class="colum two">...div> div class="colum three">...div> br class="clearfix"> 这里的br元素是关键，它会把自身以及后面跟随的任何元素都放置
《精彩绝伦的CSS》——布局（一）用轮廓代替边框
luoluolun的博客
04-17 600
一、用轮廓代替边框（outline） 平时布局时，习惯用border来看布局效果，但是border有个缺点就是border参与布局，而接下来要讲的outline则不会。 创建布局时，可以像下面这样使布局块的放置位置可视化 div{outline:1px dashed red;} 效果： 其实。。并看不出有什么不同。但还是要说轮廓的特点的： 首先，轮廓必然是环绕着元素的，并且在元素周
《精彩绝伦的CSS》——提示（三）让元素“消失”
luoluolun的博客
04-17 491
三、让元素消失 1、抑制元素的显示：display:none; .hide{ display:none; } 应用了hide类的元素，就像不存在一样，不会对布局有任何影响。 然而这样子做会有两个陷阱，一个潜在的，一个固有的。 潜在的就是，如果通过js将display设为none那么想复原时该怎么做，因为原显示值可能是inline或者block又或者都不是，有个
《精彩绝伦的css》读后感
xyvstt的博客
08-15 162
[size=medium] 接触css已经有一年多的时间了，对css的使用有了初步的了解。个人认为css的诞生乃是网页发展中一个重要的里程碑，它给无数前端开发人员带来了福音。表现与内容分离的思想，大大提高了网站开发效率。开发人员再也不用繁琐的给每一个标签加上各种属性，也不用为了布局中几个像素的偏差而绞尽脑汁，更不用为了使页面的视觉效果而载入大量的图片，因为css帮我们搞定了这一切。cs...
CSS常见布局——两栏、三栏布局
zhaohb2016的博客
07-12 1144
一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：左盒子，float：left ，宽度固定设为200px; 右盒子：margin-left:200px;宽度默认（块级元素不设置宽度或auto时为100%） 2、float+BFC 左盒子，float：left ，宽度固定设为200px; 右盒子，设置overflow:hidden,触发了BFC，其中BFC特性为不与浮动元素重叠 3、float+flex 父盒子：display：flex; 左盒子，float：left ，宽度固定设为
CSS布局——两栏布局和三栏布局
Hoshizola的博客
05-28 1488
在网站中，两栏布局和三栏布局是常见的网页布局方式，这篇文章将总结常见的两栏布局和三栏布局方案都有哪些。 一、两栏布局 以下的两栏布局方式属于左边宽度固定，右边宽度自适应的情形。 方案一：float+margin 1、首先准备一个块级父元素，父元素中有两个子元素，分别作为左右两栏； 2、将左元素设置浮动，这时左元素脱离文档流，右元素位置上移； 3、为防止右元素被左元素挡住，需要给右元素加外边距。 这是最简单的一种布局方案。 html结构： <div class="box"> <div c
CSS——水平布局和垂直布局
surymy
11-17 3895
水平布局 子元素在其父元素中水平方向的位置由以下几个属性共同决定： 为了理解方便理解画了个图，图上一共有子元素的七个属性，而这七个元素的和则必须等于父元素的width <head> <meta charset="UTF-8"> <title>Surymy</title> <style> .box1{ width:280px; height:200px;
《精彩绝伦的CSS》——选择器（二）为“目标”元素添加样式（:target）
luoluolun的博客
04-16 798
二、为“目标”元素添加样式（:target） 有时候我们希望指向文档中某一具体片段时，通常会使用到锚点（anchor）来实现，比如跳转到某一页面的id为LLL-target的元素： head to LLL-target 其中url为该页面具体url，这样点击该a标签就会自动跳转到指定元素 这样的话会有个不够人性化的方面，就是跳转过去不会有任何提示，视觉上该元素并没有突出显示，对于这种情况就
《精彩绝伦的CSS》——选择器（三）特殊性和重要性
luoluolun的博客
04-16 463
三、特殊性和重要性  1、这本书中将css的选择器特殊性（个人喜欢叫做优先级）定义为三种：  a.元素描述符（如div）贡献：0,0,0,1；  b.每个类、伪类或者属性描述符贡献：0,0,1,0；  c.每个ID描述符贡献：0,1,0,0； 用以下几个例子帮助理解： div ul ul li 0,0,0,4 4个元素描述符 body #mai
CSS——“凸排列表”
luoluolun的博客
04-17 413
我们知道要想给元素实现“首行缩进”功能只需加上：text-index:2em;即可实现。而“凸排列表”也是同样原理： ul{text-indent: -2em;list-style: none;} 以上即可实现列表的凸排列表，注意样式中包含了list-style:none这一条，如果没有这一条每个列表项就不会被凸排，且文本会跟列表标记重合。 当然，我们可以凸排任何东西，包括段落、标题、d
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值