html - 不使用 float 属性的 CSS 定位

Question

你能看看这个link ？

为什么 div 没有并排对齐？为什么他们之间有差距？或者这里是正文中的代码

我知道有很多其他方法可以解决这个问题，但在这种情况下，问题出在哪里？

在这种特殊情况下的解决方案是什么？

*{margin:0;padding:0;box-sizing:border-box;}

/*main{background:magenta;padding:10px 0px;text-align:center}*/
main{background:magenta;padding:10px 0px;text-align:left}

div{display:inline-block;background:blue;min-height:50px;
width:calc(100% / 3)}


/*issue:- positioning div without using float poperty**

*/

<main>

<div class="child"></div>
  <div class="child"></div>

  <div class="child"></div>
</main>

在CSS中

<style>
    *{margin:0;padding:0;box-sizing:border-box;}

    main{background:magenta;padding:10px 0px;text-align:left}

    div{display:inline-block;background:blue;min-height:50px;width:calc(100% / 3)}
</style>

Answer 1

因为 display: inline-block 创建了空白。

要删除它，只需将 font-size: 0 添加到您的父 div，在您的情况下为 main

使用 Flexbox，您还可以执行以下操作:

1. 将 display: flex; 添加到您的父 div，在您的情况下为 main
2. 将 flex: 1; 添加到您的子 div 并删除 width。子 div 将自动占用可用空间。

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
main {
  background: magenta;
  padding: 10px 0px;
  text-align: left;
  display: flex;
}
div {
  flex: 1;
  background: blue;
  min-height: 50px;
}

<main>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</main>