Question

我试图避免使用float。当我将宽度降低到49％时，它们并排放置但不均匀。当我将宽度提高到50％时，每个div都位于自己的行上，因此我不确定为什么。

body {
    margin: 0px;
    padding: 0px;
}
div {
    min-height: 50vh;
    width: 50%;
    display: inline-block;
}
div:nth-child(1) {
    background-color: red;
}
div:nth-child(2) {
    background-color: green;
}
div:nth-child(3) {
    background-color: blue;
}
div:nth-child(4) {
    background-color: yellow;
}

<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>

Answer 1

因为inline-block尊重空格字符，所以在这种情况下，每个元素在div之间放置一个“字符”空格。请避免使用some tricks，但我建议您使用CSS网格：

body {
 display: grid;
 grid-template-columns: 1fr 1fr;
}

Answer 2

display: inline;和display: inline-block使用文本间距，而不是display: block，后者将更精确地定位项目。

通过将div移至单行，这将迫使div之间的空间为零。

有关更多信息，请参见this article。

body {
    margin: 0px;
    padding: 0px;
}
div {
    min-height: 50vh;
    width: 50%;
    display: inline-block;
}
div:nth-child(1) {
    background-color: red;
}
div:nth-child(2) {
    background-color: green;
}
div:nth-child(3) {
    background-color: blue;
}
div:nth-child(4) {
    background-color: yellow;
}

<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>

Answer 3

您应该使用flexbox。

您需要将div包装为class =“ container”

的另一个div宽度。

那么你可以做到

   .container {
      display: flex;           /* display side by side */
      align-items: center;     /* align vertically */
    }
    .container > * {
      flex: 1; 
    }

Answer 4

如果您需要使用内联块，请确保您编写的html不带任何空格。

这不有效：

<div>Red</div>
<div>Green</div>
<div>Blue</div>
<div>Yellow</div>

这确实有效：

<div>Red</div><div>Green</div><div>Blue</div><div>Yellow</div>

CSS：在不使用float的情况下将div 2对齐在一行上

4 个答案: