我不能让 <div> 坐在一起 [重复]答案

【问题标题】：I can't make <div> to sit next to each other [duplicate]我不能让 <div> 坐在一起 [重复]
【发布时间】：2021-11-19 23:58:14
【问题描述】：

我想让一些 div 块紧跟在前一个块之后，但这是我得到的：每个块不是彼此相邻，而是从一个新行开始。

div.change {
  width: 200px;
  height: 200px;
  background-color: green;
  display: inline-block
}

div.change.one {
  opacity: 0.7;
}

div.change.two {
  opacity: 0.5;
}

div.change.three {
  opacity: 0.3;
}

div p {
  text-align: center;
  padding: 80px 5px
}

<div class="change">
  <div class="change one">
    <p>here</p>
  </div>
  <div class="change two">
    <p>here</p>
  </div>
  <div class="change three">
    <p>here</p>
  </div>
</div>

【问题讨论】：

提问前请先搜索一下。这是 Stack Overflow 上最常见的问题之一，已经回答了数百次。
@HereticMonkey，答案更多地与选择器和嵌套有关。当然，它可以通过欺骗间接解决，但是....

标签： html css

【解决方案1】：

您已设置父元素的大小并将其设置为 inline-block，但您需要在子元素上设置这些属性仅。这是对嵌套元素使用同一类的危险之一。您可以使用显式子选择器来清除问题。

div.change div.change {
  width: 150px;
  height: 150px;
  background-color: green;
  display: inline-block
}

div.change.one {
  opacity: 0.7;
}

div.change.two {
  opacity: 0.5;
}

div.change.three {
  opacity: 0.3;
}

div p {
  text-align: center;
  padding: 80px 5px
}

<div class="change">
  <div class="change one">
    <p>here</p>
  </div>
  <div class="change two">
    <p>here</p>
  </div>
  <div class="change three">
    <p>here</p>
  </div>
</div>

您可以通过从内部元素中删除 change 类来简化事情：

div.change > div {
  width: 150px;
  height: 150px;
  background-color: green;
  display: inline-block
}

div.change .one {
  opacity: 0.7;
}

div.change .two {
  opacity: 0.5;
}

div.change .three {
  opacity: 0.3;
}

div p {
  text-align: center;
  padding: 80px 5px
}

<div class="change">
  <div class="one">
    <p>here</p>
  </div>
  <div class="two">
    <p>here</p>
  </div>
  <div class="three">
    <p>here</p>
  </div>
</div>

【讨论】：

【解决方案2】：

因为您使用的是内联显示，所以将显示更改为 flex，它们将彼此相邻：

display: flex;

你也可以用这个：

flex-direction: row;

或

flex-direction: row-reverse;

并从子元素中删除更改类，仅将其保留在父元素上。我建议查看 flexbox css 课程或教程，这是 css 中非常有用的属性

【讨论】：

这不是必须的。
idk 你在说什么，但 flex 是最好的 css 属性之一，可以将元素彼此相邻并连续设置，还有其他方法，但它是最好的
没有人说不是。不过，没有必要重构来解决这个问题。内联块是完全有效和有用的。
inline block 工作，但让你的代码乱七八糟，你必须将它添加到每个孩子和屏幕小时换行..帮助他提高技能，让他更好地学习不要让他的代码变得更糟

【解决方案3】：

我认为您的问题是通过“更改”类为容器和内部 div 设置了 200px 宽度。

尝试为容器元素设置合适的宽度，或者使用 flexbox：

在容器 div 中设置 display: flex; 应该可以工作（但给它一个新的类名，不要使用“更改”，因为您也将它用于内部 div，并且此设置仅与容器相关） .

尝试在新的类名或其他唯一选择器中为容器设置一些不同且合适的宽度（600px 应该可以）。

如果您想了解更多关于 flexbox 的信息，请使用：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：