当div 独占一行时处理方法

最新推荐文章于 2024-02-06 14:34:43 发布
最新推荐文章于 2024-02-06 14:34:43 发布
阅读量1.8w 收藏
点赞数
分类专栏： css 文章标签： 当div-独占一行时
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjyqwe/article/details/78309269
版权

当div 独占一行时 使用 float:left浮动 即可

Reborn_s
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div的position属性
11-23
div的position属性详细讲解 1.流动模型 （块元素，内联元素） 2.浮动模型 （float:） 块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。 3.层模型--绝对定位 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。 div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } 效果如下： 层模型--相对定位 如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。 如下代码实现相对于以前位置向下移动50px，向右移动100px; #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } 效果图： 层模型--固定定位 fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。 效果见代码：：： relative样式 #div1{ width:300px; height:200px; border:2px red italic; position:fixed; bottom:0; right:0; 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 Relative与Absolute组合使用 小伙伴们学习了12-6小节的绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范： 1、参照定位的元素必须是相对定位元素的前辈元素： 相对参照元素进行定位 从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。 2、参照定位的元素必须加入position:relative; #box1{ width:200px; height:200px; position:relative; } 3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。 #box2{ position:absolute; top:20px; left:30px; } 这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
div独占一行 html_css实现div强制不换行
weixin_35867127的博客
12-23 6133
css实现div强制不换行DIV盒子没有赋予CSS样式时，默认DIV盒子是独占一行(宽度为100%)。一、对div设置float浮动样式对div设置float:left样式相当于是让div对象靠左，自然失去了本身宽度样式。Documentdiv{float: left;width: 120px;height: 120px;background: #eee;}12345二、对div设置display...
display属性及用法
最新发布
m0_62065520的博客
02-06 363
display是 CSS 中用于指定元素如何在页面中呈现的属性。常用取值有： block：元素将被显示为块级元素，会独占一行。并且会在前后都有换行符，使得元素之间垂直排列。 inline：元素将被显示为内联元素，不会独占一行，可以与其他内联元素并排。宽度由内容决定，不会强制换行。 inline-block：元素将被显示为内联块级元素，可以设置宽高等属性。 flex：元素将被显示为弹性盒子，可以使用弹性盒子布局。 grid：元素将被显示为网格容器，可以使用网格布局。 none：元素将不会被显示。
3.CSS-显示模式
yangyalun的博客
04-23 1083
1.div和span的区别 （1）div单独占一行，div常用于网页布局；span不独占一行，常用于修改局部信息。 （2）div是一个容器级标签，span是一个文本级标签。容器级标签可以嵌套其他所有标签，文本级标签只能嵌套文字、图片、超链接。常见的容器级标签有：div、h、ul、ol、dl、li、dt、dd；常见的文本级标签有：span、p、buis、strong、em、ins、del 2....
解决如何让两个div各占50%居于一行的问题
初心不改
08-21 3368
问题 当我们连续写两个div时，总是会默认跳到下一行。最近就遇到个需求，必须两个div并排放到一行。而且，要求两个div各占50%。查了一下总结如下： 父div包两个子div <div style="width: 100%;overflow: hidden; margin-top: 100px;"> <div style="float:left;width: 50%;float: left;"> <cpu-chart /> </div&g
行内元素，块级元素div在一行显示
热门推荐
weixin_40509884的博客
05-17 1万+
行内元素，块级元素div在一行显示 行内元素无法设置padding-top，padding-bottom，margin-top，margin-bottom，width，height；除非将行内元素改为行内块级元素或者块级元素，如：span标签可以设置display:inline-block，就可以给span标签设置宽度和高度了 一般块级元素div是单独占一行的，因此如何将2个块级元素在一行显示呢，以下有几种解决办法 2个元素都设置display: inline-block 第一个元素使用float:l
BFC的神秘面纱
诸葛韩信--一个前往前端不归路的浪子
09-09 300
面试的时候，面试官有的时候会让你说说BFC。 那到底什么是BFC，什么条件下可以创建BFC，什么元素默认就是BFC的，什么css属性遵循什么方式就可以呈现BFC呢？ BFC的英文全写是Block formatting context，中文译文是块格式化上下文，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 可能直接理解什么是BFC困难了一些，我们可以先了解一下文档的三种布局定位方案。 一、三种文档流的定位方案 常规流(Normal flow) 常规流
(图文)一看就懂的CSS 浮动 float 属性详解
weixin_45810135的博客
10-04 336
声明：本文属于搬砖大神的文章到自己的博客上，原文地址为：https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。 写在前面的话： 由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。 如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。
1 - HTML标签
Ponsine的博客
11-17 177
HTML 一、HTML基本语法 1.1 标签(元素) 不同标签不同的语义,决定了标签的功能 标签分为单标签和双标签 <!--双标签有开始标签和结束标签--> <p>内容</p> <!--单标签没有结束标签--> <hr> <hr/> 标签名不区分大小写 标签具有属性,通过属性可以设置标签的相关属性 <font color='red' size='5'>zzzz</font> <!--- c
解决div独占一行问题
qq_37669585的博客
09-28 3399
::v-deep.tests > div:not(:last-of-type) { display: inline-block; width: 50%; } css选择题设置div为块元素，同时不影响正常翻页功能（最后一个元素）
Div和span标签/CSS元素的显示形式
qq_48858031的博客
07-13 553
div作用：一般用于配合css完成网页的基本布局Span作用：一般用于配合css修改网页的局部信息区别：1.div会单独占一行，span不会单独占领一行2.div是一个容器级的标签，span是一个文本级的标签容器级标签和文本级标签的区别容器级标签可以嵌套其它所有的标签，而文本级的标签只能嵌套文字/超链接/图片容器级标签：div h ul ol dl li dt dd ·····文本级标签：span p buis strong em ins del ····注：在开发中一般情况下要嵌套都是嵌套在div中，或者
解决layui的input独占一行的问题
12-09
1.input标签独占一行，与button标签无法同行显示 （使用position属性进行设置，position属性详见。） 解决方法： 一.对button的position进行设置，使之与input同行。 二.将input与button放在一个大div中，然后将...
独行DIV自适应宽度布局CSS实例与应用范围
12-13
通过DIV CSS实例CSS自适应宽度布局方法，再过常见用处介绍充分掌握自适应独占一行一列的布局技巧。 　关键点：自适应，这个时候就不能使用固定的CSS宽度值，这个时候就只能使用百分比的宽度表达宽度。 　关键代码：...
css 行级元素在多浏览器下的宽度问题 与解决方法
12-07
结果如下： FF3: IE6(使用IE Tester): IE7: Safari4: 看来还是使用&-n-b-s-p-;的兼容性最好。 mt-inline-block的内容: 复制代码代码如下:html>body .mt-inline-block{display:-moz-inline-box;...
view 居中
Reborn_s的博客
11-29 4790
字体 居中 text-align:center; 文本居中 overflow: hidden; /防止内容超出容器或者产生自动换行/字体 垂直居中 1、设置line-height和height高度一样即可: 2、（view）vertical-align：middle;垂直居中 display: table-cell; 3、position：rela
HTML5 ul li 去前面的圆点 和 横排
Reborn_s的博客
10-22 4146
HTML5 ul li 去前面的圆点 和 横排 li{ list-style-type: none; //去圆点 float: left; //横排 }
css 图片设置为圆
Reborn_s的博客
11-21 2496
border-radius:50%;
盒子不占一行
Reborn_s的博客
11-16 245
样式 定义float
div独占一行
05-26
可以通过CSS样式来实现div独占一行，可以使用以下代码： ```css div { display: block; width: 100%; } ``` 这样设置后，div元素会自动独占一行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值