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 ，您还可以执行以下操作：

在您的案例display: flex;

main

将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>

Answer 2

因为你的Div比容器大，所以它们换成了一条新线。

更改：

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

或者使用Flex-box代替它，它比起初看起来容易得多。

Answer 3

添加以下css。

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

Answer 4

以下是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>

DEMO https://jsfiddle.net/n26nex4k/1/

Answer 5

我不建议你按照你的方式计算宽度的三分之一，因为如果你在主内部有更多的div，让我们说另一行三，他们不会在下面而是继续并排。

无论如何，你可以做些什么来修复对齐方式是使用弹性框。

在你的CSS中将它添加到你的主：

display: flex; 
align-items: center;

Answer 6

试试这个：

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

Answer 7

＆＃13;

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

＆＃13;

<main style="display:flex;">

<div class="child"></div>
  <div class="child"></div>

  <div class="child"></div>
</main>

＆＃13;

Answer 8

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 9

您可以添加

div

为您的添加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); }之间的空格，以便没有空格。

＆＃13;

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

＆＃13;

display:flex

＆＃13;

就像他们建议的那样，使用margin-right:-4px;
在您的div中使用variable1 = value1 #A comment variable2 = true #can be set true or false variable3 = foo #can be foo or bar，这样它就会显示首先没有空格。这个并不是一个好主意，特别是对于响应式div，但这取决于你的布局有多好。

CSS定位而不使用float poperty

9 个答案: