两个设置了50%的div并排显示问题

最新推荐文章于 2024-08-05 00:42:25 发布
最新推荐文章于 2024-08-05 00:42:25 发布
阅读量1k 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41445581/article/details/105865228
版权

1.两个div设置为50%之后，无法并排显示如图
在这里插入图片描述
在此情况下的解决方案
让两个标签在一行显示在这里插入图片描述
或者选择浮动
如果这么写之后还有一个问题就是如下图，存在上下间隙在这里插入图片描述

在这种情况下的解决方案就是给父元素设置font-size:0,但是这么做也会影响到子元素内容的显示，你得给每个子元素设置字体大小，因为字体是可继承的，如果不写默认都是继承父类的字体大小

红色可可
关注
让两个Div并排显示的多种方法
09-25
让两个Div并排显示的方法有很多，使用display的inline属性、通过设置float来让Div并排显示都可以实现，感兴趣的朋友可以参考下本
解决如何让两个div各占50%居于一行的问题
初心不改
08-21 3729
问题 当我们连续写两个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各占50%，并且高度相同？
最新发布
两天打鱼三天晒网
08-05 299
如何设置两个div各占一半，并且高度随着内容增加，而且两边div的高度一致呢？默认会发现高度不一致，改用flex就可以了，另外发现传统的table也可以轻易实现。不知道不用flex的话是否可以实现。
关于两个50%div盒子无法并排问题
qq_44957985的博客
12-10 1022
用时inline-block元素，总会有一个whitespace这些要素之间的问题(大约是4PX宽) 两个divs，它们都有50%的宽度，加上whitespace(~4PX)宽度大于100%，因而断裂 解决方法： 1.两个元素之间不留空隙 2.使用HTML注释 <div class="left">foo</div><!-- --><d...
为什么两个宽度50%、inline-block的div层无法并行显示——空白折叠
法克瓜的博客
10-03 1645
今天写一个很简单的“品”字布局，发现了一个坑： HTML &amp;amp;lt;div class=&amp;quot;up&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;left&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;g
多种方法解决多个div并排显示的问题
热门推荐
weixin_43912081的博客
08-15 1万+
平时做项目中总是能碰到让多个div显示在一排的问题 例如： 将上图显示为: 其实有很多种方法都可解决此问题 在这里做一下总结 一、使用 display 也就是说块元素占用了全部宽度，前后会带有换行符，会自动的在一行显示，而内联元素只需要设置宽度，不会带有换行符，也就是默认不换行 那么我们就可以考虑把 div 这种块元素转换为内联元素 即可实现 div 在一行显示，就可达到我们的目的 display有很多属性值 如下： none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对
html 图片 并排 总宽度,完美实现两个div并排且宽度为50%
weixin_29280219的博客
06-04 1054
完美实现两个div并排且宽度为50%的css代码，有需要的朋友可参考。在ie8,ff3下都可以，当我用ie6一看就折行了。网上搜了搜，发现在ie6,ie7下如果总宽度为奇数就折行，为偶数正常。打个比方：总宽度为800，那2个div刚好就400，如果总宽度为799，那ie8,ff3下会把分配好，一个400，一个399。而ie6,ie7就都分配成400，加起来800大于799所以会折行。看来直接设wi...
关于两个DIV各占50%时无法在同一行显示的问题
佳佳的博客
07-22 3774
关于两个DIV各占50%时无法在同一行显示的问题 原因浏览器的原因，浏览器有3px的BUG。 因为margin,padding,border都设为0，所以与之无关。 解决方案（1）在其中一个div上加上margin-left：-3px；（2）将两个元素都设置为靠左或靠右浮动，然后将宽度均设为50%。 注意margin,padding,border是会占用当前元素以外的空间，而并非其本身的空间。
两个div并排的实现代码
09-25
总结来说，通过设置`div`元素的`float`属性、宽度和边距，我们可以实现两个`div`并排显示。如果需要进一步控制布局，如居中对齐，可以添加外部容器并调整其样式。对于初学者来说，理解并掌握这些基本的CSS布局技巧...
两个div如何并排一行具体该怎么实现
09-25
在网页设计中，将两个或多个div元素并排显示在同一行...总结来说，实现两个div并排显示，传统方法依赖于浮动和内联显示，而现代方法推荐使用flexbox布局。学习和掌握这些基础知识点对Web前端开发人员来说是必不可少的。
子元素宽度设置50%无法并排显示的问题
monkeyfly学前端
06-25 4486
Write By Monkeyfly 以下内容均为原创，如需转载请注明出处。 前提 需求需要实现的效果图如下所示。 但为了让两个设置了display:inline-block;的div并排显示时，却出现了换行的问题。（如下图所示） 解决方法 方法1. width:49%;（虽然解决了布局的问题， 但是还是不明白为什么了宽度设置了50%会失效。） 为了找到原因，专门去百...
php怎么让两个div并排,两个div并排，右边的div需要铺满剩余空间？_html/css_WEB-ITnose...
weixin_39557583的博客
03-20 201
两个div并排，右边的div需要铺满剩余空间？该如何定义CSSDIV1DIV2两个div并排，右边的div需要铺满剩余空间？该如何定义CSS回复讨论(解决方案)你试试看div2右浮动，然后给两个div设置固定宽度，div2 width: 85%;你试试看div2右浮动，然后给两个div设置固定宽度，右浮动？能给出具体的代码吗？div2 width: 85%;这个方法我用了，有没有更简便的方法？第一...
两个50%的盒子为什么放不下
weixin_30480651的博客
01-26 156
/*html*/ <div class=wrap> <div class="red"></div> <div class="blue"></div> </div> /*css*/ .wrap{ width:200px; height:100px; border: 4px solid #0...
处理两个div不在同一行（自用，两种方法）
cd243643664的博客
06-09 3530
处理两个div不在同一行
css中高度设置百分比但是没有效果
我是没有梦想的小白
11-04 1万+
当我们给块级元素设置响应式高度的时候，例如给div设置height=50%，往往没能看到效果。  原因是百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的。  需要了解的是对于宽度来说，其父级元素无须确定宽度就能设置百分比 但高度则不同，若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式！！！ 看完上面一段话，我尝试加body{heigh：10...
html位置并排不换行,div并排不换行显示 DIV并排显示
weixin_39707597的博客
06-04 2007
CSS各种方法实现div并排排成一排显示，实现两个或两个以上div并排显示。div并排不换行显示之CSS实现默认情况下在CSS布局中，我们知道div盒子单独占一行是强制换行的。但有时候我们又想让两个或两个以上div盒子并排放着如何实现呢？下面我们就看如何实现div不换行并排着。方法有三种，第一种对div加float样式，第二种对div加display:inline，第三种不使用div标签使用spa...
vue 两个div并排显示
07-08
要在Vue中实现两个div并排显示，可以使用CSS的flexbox来实现。以下是一个示例代码： ```html <template> <div class="container"> <div class="item">Div 1</div> <div class="item">Div 2</div> </div> </template> <style> .container { display: flex; } .item { flex: 1; margin: 10px; } </style> ``` 在上面的示例中，我们使用了一个名为`container`的div作为容器，并将其样式设置为`display: flex;`，这将启用flexbox布局。 然后，我们在容器中放置两个名为`item`的div，这些div将并排显示。通过设置`flex: 1;`，我们使每个`item`div都占据相等的空间，并通过设置`margin`为10px来为它们添加间距。 这样，两个div就能够并排显示在Vue应用中了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值