两个div显示一行时的问题

最新推荐文章于 2022-11-08 16:54:25 发布
原创 最新推荐文章于 2022-11-08 16:54:25 发布 · 337 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了使用inline-block布局时遇到的元素间距问题，并提供了几种解决方案，包括调整字体大小、使用浮动属性、设置white-space等。

每个div显示宽度50%,但是inline-block的时候有间距问题，两个div不能显示一行

<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div2</div>
</body>



解决方法

1.设置font-size: 12px;然后在外面套个div,设置font-size:0

  <div style="display:block;font-size:0;width:100%;">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div2</div>
    </div>

2.设置div float: left;

3.将html中的三个div显示成1行

   <div class="div1">div1</div><div class="div2">div2</div><div class="div3">div2</div>

4.设置div1 div2

<div style="display:block;width:100%;white-space:nowrap;">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
</div>

但是这还是有个问题，div1和div2之间有个空隙  





前端html中让两个或者多个div在一行显示，用style给div加上css样式
sunzixiao的博客
07-27 3562
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。我们知道，默认情况下每个div都是单独一行显示的，那么怎么让多个div在一行显示呢？
几个div在一行的三种方法
weixin_30480075的博客
07-25 1万+
在网页开发过程中总会有需求让几个div水平显示在一行，而正常情况下两个div默认是block，所以是不能显示在一行的，如下面显示： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> div { height...
给div使用display:inline-block产生的问题
weixin_34309435的博客
11-13 475
使用display:inline-block产生的问题 给两个div设置了display:inline-block，也控制了两个div的长度，但两个div不在同一行案例： ---div部分--- <div id="div0"> <div id="div1"></div> ...
两个元素设置display: inline-block之后宽度50%不能在一行显示
weixin_42178670的博客
08-03 1073
解决方法一： 删除两个元素之间的空格 // 以下写法会变成两行 <div>line1</div> <div>line2</div> // 以下写法不会变成两行，删除两个元素之间的空格 <div>line1</div><div> line2</div> 解决方法二： 在父级容器设置font-size: 0; ...
当两个div无法放在一行的解决办法
eileen823的博客
02-19 1151
1、display:inline-block,转为行内块即可 2、利用folat,比如都float:left，放置在一行以后，再用padding,margin，设置具体的位置即可
让两个Div并排显示的多种方法
09-25
在网页设计中，将两个Div并排显示是一种常见的布局需求。实现这一布局有多种方法，每种方法都基于CSS的不同特性。下面将详细介绍各种实现方式及相关知识点。 一、使用display的inline属性 这种方法是通过将两个Div...
让多个div在同一行显示的样式及html代码
09-25
要让多个div在同一行显示，关键在于对CSS的`float`属性的正确应用。通过为每个div元素设置相同的宽度和高度，并且适当地使用浮动（float），可以实现div元素在同一行内水平排列的效果。在HTML结构中，父容器需要有...
两个div如何并排一行具体该怎么实现
12-13
在网页布局设计中，使两个`div`元素并排显示是一项常见的需求。...以上就是如何在HTML和CSS中实现两个`div`并排一行的具体实现方法。通过理解这些基础知识，你可以灵活地调整布局，满足各种网页设计需求。
两个DIV同一行显示
08-28
`被用来让两个`<div>`元素并排显示在一行内。 ```html <div style="width:100px;"> <div style="float:left;background-color:#CCCC00;width:50%;">wfwfwfwf</div> <div style="float:left;background-color:#00...
通过浮动+定位实现两个div在同一行
09-25
下面将详细介绍如何通过CSS的浮动属性和定位属性的组合使用，来实现两个div在同一行显示的效果。 首先，浮动是CSS布局中一个非常重要的属性。通过设置元素的浮动属性，可以使得元素脱离正常的文档流，向左或向右...
display:inline-block不独占一行的块级元素
cristina_song的博客
06-26 4677
display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行(行内元素设置了position属性或float属性或display后属性默认变成inline-block，所以可以设置宽高) 不能更改元素的height，width的值，大小由内容撑开. 可以使...
display:inline-block的小注意
xdongll的专栏
07-18 405
今天使用display:inline-block的时候，发现两个div不能在同一行显示，代码如下： 链接一 链接一 后来百度了一下发现，display:inline-block有个间距，在这里可在父级元素用font-size:0;去除间隙；同时在子元素上设置font-size
display几点解释
u011392772的专栏
05-15 764
1.解释一下display的几个常用的属性值，inline ， block， inline-block inline: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行. bl...
将多个DIV放在一行显示的三种方法（超简洁，一目了然）
qq_37967853的博客
11-08 1万+
将多个DIV放在一行显示的三种方法（超简洁，一目了然）
多个div在同一行显示
暴走的山交君的博客
09-27 4595
原因：div为块级元素，默认占一行高度。解决方法1：两个div都添加样式。，设置宽高失效，div靠内容撑起）解决方法2：两个div都添加样式。（后面不在同行的div设置。
如何让div它们在一行显示
草莓在努力！！！
07-31 3498
blueidea <!-- body {font-size:12px; margin:0; padding:0;} #head { position:relative; margin: auto; /
div和span显示在同一行
weixin_34221276的博客
04-13 5192
div和span标签的区别 div 是块级元素标签，独占一行，后面跟的内容换行显示 span 是内联元素标签，后面可以跟其他显示内容，不独占一行 display属性可以改变内联元素和块级元素的状态，实现两种元素的互换 1.div变成内敛元素 代码展示 <!DOCTYPE html> <html> <head lang="en"> ...
css 实现div内显示一行或两行，超出部分用省略号显示
荆轲刺秦王
12-27 1990
div内显示一行，超出部分用省略号显示  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; div内显示两行或三行，超出部分用省略号显示 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;...
Html 让两个div 显示在同一行
热门推荐
DM专栏
02-22 2万+
让两个 div 显示在同一行 标题 div{ display:inline; } 我是第一个Div 我是第二个Div
让两个div显示在一行
最新发布
09-27
在CSS布局中，让两个`<div>`元素在同一行显示通常有两种常见的方法： 1. **Flexbox**（弹性盒模型）：这是现代浏览器推荐的一种方法，对于响应式设计非常友好。你可以给父容器设置`display: flex;`，然后将两个`div...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值