解决50%宽度div再加上边框无法左右排列问题

最新推荐文章于 2023-05-05 14:30:55 发布
最新推荐文章于 2023-05-05 14:30:55 发布
阅读量1.2k 收藏
点赞数
分类专栏： html 文章标签： 盒子宽度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38282872/article/details/80333082
版权
当为CSS中的div设置50%宽度并添加边框时，会导致元素无法并排显示。解决方法是利用`box-sizing: border-box;`属性，确保边框计算在内宽中，从而实现两个div并排排列。参考链接提供了一个详细的盒子模型宽度计算解释。
摘要由CSDN通过智能技术生成
<div class="container">
<div class="box">left</div>
<div class="box">right</div>
</div>
平时我们想让两个div在并排占据左右两侧，我们设置
.box{
float:left;
最低0.47元/天 解锁文章
风鸟_blue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
设置了50% 不能并排显示
滕青山博客
03-14 237
子元素设置宽度的百分比是指子元素内容区域相对于父元素内容区域； 同时，正是由于子元素设置宽度的百分比是指子元素内容区域相对于父元素内容区域，所以造成了子元素溢出了父元素。 具体原因见：正确使用"width:100%" - 简书 https://www.jianshu.com/p/7d565f14f98e 当设置box-sizing:border-box时，子元素设置宽度的百分比是指子元素整个盒子区域相对于父元素内容区域。 如果想要正确使用"width:100%"这一属性...
div 2 列 50%宽度布局
weixin_34395205的博客
08-30 498
2019独角兽企业重金招聘Python工程师标准>>> ...
html 图片 并排 总宽度,完美实现两个div并排且宽度为50%
weixin_29280219的博客
06-04 1031
完美实现两个div并排且宽度为50%的css代码，有需要的朋友可参考。在ie8,ff3下都可以，当我用ie6一看就折行了。网上搜了搜，发现在ie6,ie7下如果总宽度为奇数就折行，为偶数正常。打个比方：总宽度为800，那2个div刚好就400，如果总宽度为799，那ie8,ff3下会把分配好，一个400，一个399。而ie6,ie7就都分配成400，加起来800大于799所以会折行。看来直接设wi...
echart 设计宽度为百分比时，div撑不开
weixin_30764883的博客
03-08 584
解决思路：将百分比换算成px 一句话搞定 ("#chart").css( 'width', $("#chart").width() );$("#chart")指的是当前绘制图表的div，他的css宽度写的是100%，通过上面的代码将100%的宽度换算成px值，再添加到style里面就可以了，echarts就能正确的计算图标宽度了. 转载于:https://www.cnblogs.com/z...
html div边框宽度,边框的宽度
weixin_30146171的博客
06-10 3048
可以通过border-width 属性为边框指定宽度。为边框指定宽度有两种方式：可以指定长度值，譬如 2px 或 0.1em；可能使用 3 个环节字之一，它们分别是 thin 、medium(默许值) 和 thick。表明：CSS 不有定义 3 个症结字的具体宽度，以是一个用户代办署理可能把 thin 、medium 和 thick 划分设置为便是 5px、3px 与 2px，而另一个用户署理则...
多行排列图片时hover上去加边框挤图片的解决方法兼容IE7+
09-25
在网页设计中，我们经常会遇到一个问题，那就是当多个图片以多行多列的方式排列时，如果在鼠标悬停（hover）时为图片添加边框，会导致下方的图片位置发生偏移，这种现象被称为“边框挤压”问题。尤其是在兼容较老...
DIV+CSS常见问题的14条原因分析
09-25
为了解决这个问题，可以使用绝对定位或调整元素的排列顺序。 11. **透明度差异**：不同浏览器对透明度的支持不同，IE6和IE7使用滤镜（`filter`），其他浏览器使用`opacity`。为了跨浏览器兼容，需要分别处理。 12....
50个Div+CSS模板
02-16
《50个Div+CSS模板解析与应用》 Div+CSS是网页设计中常见的布局方式，它通过HTML的Div元素和CSS（层叠样式表）进行页面结构与样式的分离，提高了网页的可维护性和易读性。"50个Div+CSS模板"集合了多种设计模式，为...
div宽度自适应布局(右边自适应)
04-21
在网页设计中，"div宽度自适应布局(右边自适应)"是一种常见的网页布局技术，它主要涉及CSS（层叠样式表）的运用，使网页内容能够根据不同的屏幕尺寸和设备进行适配，尤其是针对响应式设计。在这个布局模式下，通常...
50个按钮样式css+div
05-04
这个“50个按钮样式css+div”资源集合提供了一种高效的学习方法，帮助开发者和设计师掌握如何利用CSS来定制各种各样的按钮样式，提升网站的视觉效果和用户体验。下面将详细探讨这些知识点。 1. CSS基础：首先，理解...
高度不定垂直居中_宽度高度不固定的div如何水平居中以及垂直居中从
weixin_42405368的博客
01-17 289
宽度高度不固定的div 如何水平居中以及垂直居中如何让div水平居中以及垂直居中，在宽高不定的情况下要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。怎么让一个不定宽高的div水平居中，垂直水平居中欢迎...
解决如何让两个div各占50%居于一行的问题
初心不改
08-21 3674
问题 当我们连续写两个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
css清除两个div距离,CSS浮动清除两个50％宽度Div与边框
weixin_42522400的博客
08-04 188
HTML1234CSS.rightInRow5050{width:50%;display: inline-block;float:right;}.leftInRow5050{width:50%;display: inline-block;float:left;}.leftInRow5050.squareTopLeft{height: 35%;border-right: 1px solid #CCC...
div设置float后不左右排列
weixin_43837268的博客
12-21 1213
解决方法： 设置父盒子宽度为width:100%,搞定！
25.html设置浮动（float属性）
top9523的博客
07-01 8624
25.html设置浮动（float属性）
div从上到下从左到右自动换行显示排列
qq_42661587的博客
06-10 4432
先看效果图： .box{//外部的div盒子 display: flex;//先设置div里的内容显示同一行 justify-content: flex-start;//左右布局 flex-wrap: wrap;//换行 align-content: flex-start;//紧揍排列 } .child1 ,.child2{//div里的内容块 width: 100px; height: 100px; } ...
css div上下左右排序
最新发布
浅影歌年的博客
05-05 2678
* 排序方式： column-先列后行， row-先行后列 *//* 设计列宽 *//* 设计行高 */
浅谈CSS满屏品字布局中div设置height为百分比无效的问题
筱葭的博客
03-01 1823
满屏品字布局： html,body{ margin:0; height:100%; } #top{ width:100%; height:60%; background:red; } #left{ width:50%; height:40%; float:left; b
前端面试题 - 如何居中一个float:left的元素
热门推荐
你看起来很好玩
08-08 4万+
听起来很高端大气上档次的样子 但是其实试了一下还是很简单第一种方法<style type="text/css"> .box { float: left; width: 100px; height: 100px; background: lightcoral; } </style> <body> <div clas
html 生成3个带边框并且指定宽度跟高度的并列div
04-20
Sure! 这是一个HTML代码示例，生成3个带边框、指定宽度和高度的并列div： ``` <div style="display: flex;"> <div style="border: 1px solid black; width: 100px; height: 100px;"></div> <div style="border: 1px solid black; width: 100px; height: 100px;"></div> <div style="border: 1px solid black; width: 100px; height: 100px;"></div> </div> ``` 每个div元素都有`border`属性来设置黑色的1像素边框，并且`width`和`height`属性用于指定宽度和高度（在这个示例中，宽度和高度均为100像素）。这些div元素被包裹在一个`display:flex`样式下的父级`div`元素中，以实现并排排列。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值