当前位置: 首页 > 知识库问答 >
问题:

前端 - `display: inline-block` 应该是行内可以有排列多个div元素的呀,为何这里会出现这样的重叠情况呢?

陶烨赫
2023-08-12

为何div 做成inline-block 之后,重叠了呢?

代码如下:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <div class="container">    <div class="item" />    <div class="item" />    <div class="item" />    <div class="item" />    <div class="item" />    <div class="item" />    <div class="item" />  </div><style>  .container {    flex-wrap: wrap  }  .item {    width: 50px;    height: 50px;    background-color: antiquewhite;    border: 1px solid black;    display: inline-block;  } </style></body></html>

效果:
image.png

display: inline-block 应该是行内可以有排列多个div元素的呀,为何这里会出现这样的重叠情况呢?

共有2个答案

尉迟德惠
2023-08-12

在您的代码中,<div> 元素的闭合标签是使用自闭合标记 <div />,这可能会导致解析错误。应该使用正常的闭合标签 <div></div>。

此外,对于 .container 容器,将其样式 flex-wrap 设置为 wrap,可以确保在容器空间不够时,项目能够自动换行。但是,在您的示例中,由于 .container 的宽度不够容纳所有的项目,项目会超出容器的范围。

您可以尝试增加容器的宽度或减少项目的数量,以适应容器的大小,或者使用其他布局技术来更好地控制项目的排列方式。

以下是更新后的示例代码:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <div class="container">    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>    <div class="item"></div>  </div><style>  .container {    display: flex;    flex-wrap: wrap;  }  .item {    width: 50px;    height: 50px;    background-color: antiquewhite;    border: 1px solid black;    margin: 5px;  } </style></body></html>

在更新后的代码中,我添加了 .container 的 display: flex; 样式,以确保容器正常使用 Flex 布局。另外,我还添加了 margin 属性来为 .item 元素之间添加一些间距,以避免它们重叠。

戎志勇
2023-08-12

image.png
dom渲染结构是嵌套的,<div />不是W3C的标准写法,浏览器渲染会出错,需要使用<div></div>,开始和结束标签
宽度包括border是计算在内的,整体宽度52px;内容宽度50px;嵌套所以存在这种情况

 类似资料: