为什么 display:inline-block 没有对齐我在另一个 div 中使用的两个 div 并且当我使用 float:left 时它的工作？答案

【问题标题】：why display:inline-block is not aligning my two div which is used inside another div and when i use float:left its working?为什么 display:inline-block 没有对齐我在另一个 div 中使用的两个 div 并且当我使用 float:left 时它的工作？
【发布时间】：2022-10-04 15:54:49
【问题描述】：

我创建了一个具有一定宽度的 id 内部的 div 元素
我在 id 内部添加了两个宽度相等的子 div 元素。

当我给子元素 float: left 属性时，它们彼此相邻，但是当我给 display: inline-block 时，它不会保持相邻，它会向下移动。您能否更新一下为什么它在显示的情况下不调整：inline-block

带有浮动的代码其工作。孩子们是相邻的

* {
  box-sizing: border-box;
}

#outer {
  width: 700px;
  height: 400px;
  border: 1px solid #006669;
}

#inner {
  margin-left: 99px;
  margin-right: 99px;
  margin-top: 49px;
  margin-bottom: 49px;
  width: 500px;
  height: 300px;
  border: 1px solid crimson;
}

#child1 {
  float: left;
  width: 249px;
  height: 300px;
  background: darkgreen;
}

#child2 {
  float: left;
  width: 249px;
  height: 300px;
  background: darkcyan;
}

<div id="outer">
  <div id="inner">
    <div id="child1">Child1</div>
    <div id="child2">Child2</div>
  </div>
</div>

带有内联块的代码不起作用。孩子不相邻

  *{
            box-sizing: border-box;
        }
        #outer{
            width: 700px;
            height: 400px;
            border: 1px solid #006669;
        }
        #inner{
            margin-left: 99px;
            margin-right: 99px;
            margin-top: 49px;
            margin-bottom: 49px;
            width: 500px;
            height: 300px;
            border: 1px solid crimson;
        }
        #child1{
            display: inline-block;
            width: 249px;
            height: 300px;
            background: darkgreen;
        }
        #child2{
            display: inline-block;
            width: 249px;
            height: 300px;
            background: darkcyan;
        }

    <div id="outer">
        <div id="inner">
            <div id="child1">Child1</div>
            <div id="child2">Child2</div>
        </div>
    </div>

【问题讨论】：

你没有给他们留下足够的空间让他们坐在一起。
不，如果我们使用 float:left 它给出结果。
您可以使用 float:left 将上面的代码粘贴到 html 上以查看结果，也可以使用 display:inline-block 查看结果。我已经为同一个@AHaworth 提供了样式和正文代码
是的，当您向左浮动时它们适合，但是您忘记了其他在行内块时占用空间的东西。我会提出一个答案来解释更多。
老实说，只需使用display: flex;。我们不应该（ab）使用float: 进行布局：它的目的是用于文本流动的华丽首字母下沉和嵌入内容，而不是布局容器。

标签： html css

【解决方案1】：

您已经忘记了一些占用额外空间的东西 - 系统在 inline-block 元素之间放置的间隙以及您在内部设置边框并将 box-sizing 设置为边框框的事实。

删除边框并将字体大小设置为零，元素将并排放置。

<style>
  * {
    box-sizing: border-box;
  }
  
  #outer {
    width: 700px;
    height: 400px;
    border: 1px solid #006669;
  }
  
  #inner {
    margin-left: 99px;
    margin-right: 99px;
    margin-top: 49px;
    margin-bottom: 49px;
    width: 500px;
    height: 300px;
    /*border: 1px solid crimson;*/
    font-size: 0px;
  }
  
  #child1 {
    display: inline-block;
    width: 250px;
    height: 300px;
    background: darkgreen;
  }
  
  #child2 {
    display: inline-block;
    width: 250px;
    height: 300px;
    background: darkcyan;
  }
</style>

<body>
  <div id="outer">
    <div id="inner">
      <div id="child1"></div>
      <div id="child2"></div>
    </div>
  </div>
</body>

虽然我了解间隙部分，但我并不完全了解边框部分，因为您通过将每个 div 的宽度设置为 249 像素来允许 2 x 1 像素。是否存在一些舍入错误？我确实经常看到背景颜色和边框（随缩放而变化）之间的部分 CSS 像素（但 1 个屏幕像素）的虚假间隙，这表明当系统尝试在组成一个的几个屏幕像素之间进行映射时存在一些不匹配现代屏幕上的 CSS 像素。希望有人可以证实这一点或提供另一种解释。

【讨论】：