CSS 多个div并排显示 inline-block —— 前端踩坑6

最新推荐文章于 2022-12-13 14:34:13 发布
最新推荐文章于 2022-12-13 14:34:13 发布
阅读量1k 收藏
点赞数
分类专栏： 前端踩坑 文章标签： css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34548699/article/details/105874149
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title</title>
  <style>
    .in{
      display: inline-block;
      width: 30%;
      background: #00aeef;
    }
  </style>
</head>
<body>
	<div style="width: 90%;margin: auto">
	  <div class="in">身高</div>
	  <div class="in">体重</div>
	  <div class="in">肺活量</div>
	</div>
</body>
</html>

display: inline-block;

将元素显示为行内块状元素，使元素排列在同一行。
在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。在这里插入图片描述

大胖小呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS布局--inline-block 布局
happyCoding1024的博客
01-04 484
布局其实就是想办法怎样将一些元素横向的排列起来，纵向由于块级元素的存在会自动占据一行。 inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行，而且使用 inline-block 元素排列没有清除浮动这样的问题。 但是，使用 inline-block 布局两个元素之间会有一个空白间隙，下面一起来看一下。 html代码 <div class="container...
采用display:inline-block设置多个div并列，div内添加内容后div错位
Acid_lemon的博客
06-02 438
页面代码 <div class="transfer"></div> <div class="operations"></div> <div class="transfer"></div> .transfer{ display: inline-block; width: 380px; height: 208px; border: 1px solid #D5DEED; background-color
inline-block并排影响布局
huangbaokang的博客
04-14 530
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .my{ display: inline-block; border: 1px solid b...
inline-block并排显示存在间隙
lxp_1101的博客
09-18 670
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{ padding:0; margin:0; } div{ display:inline-block; height:200px; } .c1{ width:50%; ba...
行内块（inline-block）并排影响布局
m0_55879104的博客
06-27 300
demo 效果图 当四个div都有内容时，并排显示正常。当第二个、第四个div没有内容时，惊讶的显示为如下效果： 问题剖析   display：inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。（准确的说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性）   但有一点需要注意的是：图片文字等内联元素默认的对齐方式是和父级的baseline进行对齐的。 解决方法 1、简单粗暴的给所有元素都加上内容
2个div并列
03-26
NULL 博文链接：https://baiiiuuu.iteye.com/blog/1130265
CSS属性display:inline-block用法深入理解
09-25
`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，又能像块级元素一样控制内容的宽度和高度。下面我们将深入探讨`display:inline-...
关于css display: inline block inline-block的区别分析
09-25
在CSS布局中，`display`属性是一个至关重要的样式规则，用于定义元素的呈现方式。`display: inline`、`display: block` 和 `display: inline-block` 是三种常见的值，它们各自具有不同的行为和用途。 1. **display:...
详解css中inline-block的最小宽度值
11-21
总结来说，`inline-block`的最小宽度值是一个CSS布局中的重要概念，它涉及到元素内容的显示和布局策略。通过理解和掌握这个特性，开发者可以更精细地控制元素的布局，实现更加复杂和富有创意的设计效果。在实际应用...
inline-block带来的元素间距问题解决
09-24
首先，`display: inline-block` 是一种混合型布局模式，它结合了`inline`元素的并排显示特性与`block`元素的宽高控制能力。在`inline-block`模式下，元素可以像文本一样排列在同一行，但也可以设置宽度、高度、内...
详解CSS 去掉inline-block元素间隙的几种方法
09-22
《CSS去除inline-block元素间隙的策略与解析》 在CSS布局设计中，inline-block元素的间隙问题时常困扰着开发者。这种间隙可能导致布局错位，影响整体的视觉效果。本文将深入探讨inline-block元素的特性，分析间隙...
让两个Div并排显示的多种方法
热门推荐
liukuan73的专栏
07-13 5万+
http://www.jb51.net/css/140705.html 让两个Div并排显示的方法有很多，使用display的inline属性、通过设置float来让Div并排显示都可以实现，感兴趣的朋友可以参考下本文 让两个Div并排显示  一、使用display的inline属性  复制代码 代码如下: AAAA  BBBB 
两个inline-block的盒子并排显示问题
weixin_60526471的博客
10-14 1612
两个inline-block的盒子并排显示问题 多个div使用display:inline-block时候div之间有间隔
inline-block的三个元素，width均为33.33%却不能并排显示,两个50%也不能平分，处理
清风古韵
01-25 998
inline-block的三个元素，width均为33.33%却不能并排显示 html: &lt;div class="container"&gt; &lt;div class="col"&gt; 1111 &lt;/div&gt; &lt;div class="col"&gt; 2222 &lt;/div&
如何让两个div并排显示
很多时候犯错都是在不知情的情况下发生的
09-14 2889
网站网页很长用到两个div并排，今天就来看看几种常见的方法 原理 就是堆砌几个div  用到的 长 宽 及float就可以了 方法/步骤 首先我们如图所示的web结构即一个html和css即可实现 打开html页面 定义一个大的div和两个小div 如图所示 第一个方法就是我们最常用的float浮动，只要两个小div的宽度小于等于大div的宽度，即可实现...
inline-block元素上浮无法对齐的解决办法
qq_45530512的博客
12-13 262
inline-block元素上浮无法对齐的解决办法
＜li＞标签 —— 转换为行内块后，横向列表无法对齐
Y_Aryan的博客
08-07 714
。
两个并列的inline-block 元素的问题
糯米粥和玉米羹
05-12 197
<div></div> <div>111</div> div { height:30px; width:30px; /* border: 10px solid pink; */ display:inline-block; padding:10px; /* margin:10px; */ background: red; } 衍生问题。 block，inline和inline-block概念和区别 继而问，最开始...
解决两个inline-block并排出现空白间隙
RistonTea的博客
04-14 489
遇到一个这样的问题，当我们把div标签的display设置为inline-block时，这时标签的边距会有出现，看下面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
CSS之使用display:inline-block来布局
最新发布
06-10
使用 `display: inline-block` 可以将元素设置为行内块级元素，可以实现类似于行内元素和块级元素的混合布局效果，并可以对其设置宽高、内边距、外边距等属性。 具体地，我们可以将需要进行布局的元素设置为 `display: inline-block`，然后通过 `vertical-align` 属性来控制元素的垂直对齐方式，再通过 `margin` 和 `padding` 属性来调整元素之间的间距。 例如，下面的代码可以实现两列等宽的布局效果： ```html <div class="container"> <div class="col">Column 1</div> <div class="col">Column 2</div> </div> ``` ```css .container { font-size: 0; /* 去除 inline-block 元素之间的空隙 */ } .col { display: inline-block; width: 50%; vertical-align: top; box-sizing: border-box; padding: 10px; margin: 0; font-size: 16px; } ``` 这样，两个列就可以并排显示，并且等宽，同时也可以设置内边距和外边距等样式。不过需要注意，使用 `inline-block` 布局时，需要处理好元素之间的空隙问题，一种方法是将父元素的字体大小设置为 0，另一种方法是将元素之间的空隙注释掉。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值