不使用浮动属性的CSS定位

Question

你能看一下这个链接吗？

为什么这些div不能并排对齐？它们之间为什么会有间隙？或者在body中的代码是这样的：

我知道解决这个问题还有很多其他方法，但在这种情况下，到底出了什么问题呢？

在这种特定情况下，有什么解决方案呢？

*{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>

- Indranil

---

@RamanaaGj 他们不想使用浮点数（这样做是正确的） - Andrew Bone

Answer 1

因为 display: inline-block 会创建空白间隙。要去除这个问题，只需在父 div 中添加 font-size: 0，在你的情况下是 main。

使用 Flexbox，你也可以进行以下操作：

1. 在父 div 中添加 display: flex;，在你的情况下是 main
2. 在子 div 中添加 flex: 1; 并删除 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>

- SvenL

---

请提供一个Flexbox的示例。 - Andrew Bone

@AndrewBone 做好了 :) - SvenL

Answer 2

这是Andrew建议的flexbox解决方案

代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main {
  background: magenta;
  padding: 10px 0px;
  text-align: left;
  display: flex;
  flex-direction: row;
}
div {
  background: blue;
  height: 50px;
  width: calc(100% / 3);
}

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

演示 https://jsfiddle.net/n26nex4k/1/

- Brad

Answer 3

*{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**

hallow can u say that why 
  there div are not align each of on side by side? and why there a gap between them? 
i know there a lot of another way to solve this but in this case what is the problem going on?

**what is the solution in this prticulr case?**
*/

<main style="display:flex;">

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

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

- sree

---

只需将样式"display:flex"添加到您的<main>标签即可。就这样。 - sree

Answer 4

这是我尝试的另一种方法*

*{margin:0;padding:0;box-sizing:border-box;}
#new1{background:darksalmon;padding:10px 0px;}

.new1_child{background:green; padding:10px 0px;
width:calc(100% / 4); display:inline-block;text-align:center;color:white}
//without using semantic code write

 <section id="new1">
    <aside class="new1_child">lorem3</aside><aside class="new1_child">lorem4</aside><aside class="new1_child">lorem5</aside><aside class="new1_child">lorem6</aside>
    </section>
<!--option 1 align content without flex or float-->
<br><hr>

- Indranil

Answer 5

因为您的Div比容器大，所以它们会换行到新的一行。

更改为：

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

或者使用Flex-box，它比一开始看起来的要容易得多。

- J o

---

为什么是3.333，需要更多的技术细节才能理解，先生。 - Indranil

Answer 6

添加以下 CSS。

 main{
     display: flex;
     padding-right: 10px;
 }
 div{
    margin-left: 10px;
 }

- Pravin Vavadiya

Answer 7

我不建议按照你的方式计算宽度的三分之一，因为如果你在主要区域内有更多的div，比如另一行三个，它们不会下移而是继续并排。

无论如何，你可以利用flex box来解决对齐问题。

在你的CSS中添加以下内容到你的主要区域：

display: flex; 
align-items: center;

- Adrian Barylski

---

Flex很好，但支持有限。 - Indranil

Answer 8

试试这个：

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

main{background:magenta;padding:10px 0px;text-align:left;display:flex;justify-content:space-between;}

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

- Dave Lynch

Answer 9

1. 您可以为您的 div 添加以下样式：

   line-height: 0; outline: none; vertical-align: top;

   并在您的 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;
  line-height: 0;
  background: blue;
  min-height: 50px;
  outline: none;
  vertical-align: top;
  width: calc(100% / 3);
}

<main>

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

2. 像他们建议的那样，使用 display:flex

3. 在您的 div 中使用 margin-right:-4px;，这样它看起来就像一开始没有空格。这不是一个很好的主意，特别是对于响应式 div，但这取决于您布局的好坏。

- user3771102

---

请解释一下为什么要踩我？明明我只是在提供选项。 - user3771102

@Indranil 是的，这并不是灵活性的问题，但 Flex 不是我回答的唯一选项，为什么我还会被踩？这甚至不是我的首选。 - user3771102

先生，我不会因为负面评价而做任何事情，实际上，我从未对任何网站进行过这种恶劣的评分，因为我感激大家帮助我分享自己的想法。 - Indranil