为什么红色 div 没有漂浮在黄色旁边？

Question

我想将红色 div 放在黄色的旁边，而不从下面的代码 中删除任何内容。不可能吧？对了，这个行为叫什么，是transform引起的，类似于相对定位的效果？如果我无法关闭它，至少知道如何调用它会很棒。

div {
  float: left;
  padding: 20px;
}
div:first-child {
  background: yellow;
  margin-left: 50%;
  transform: translateX(-100%);
}
div:nth-child(2) {
  background: red;
}

<div>This is the first div.</div>
<div>2nd div.</div>

Answer 1

您的第一个 div 正在向左变换宽度。您希望第二个 div 也可以向左变换第一个 div 的宽度，但这在 CSS.

中是不可能的

相反，您可以给第一个 div 绝对定位，给第二个 div 50% margin-left:

div {
  float: left;
  padding: 20px;
}
div:first-child {
  position: absolute;
  background: yellow;
  margin-left: 50%;
  transform: translateX(-100%);
}
div:nth-child(2) {
  margin-left: 50%;
  background: red;
}

<div>This is the first div.</div>
<div>2nd div.</div>

为什么红色 div 没有漂浮在黄色旁边？

Why does the red div not float right next to the yellow one?

css

css-transforms