Question

我想将红色div放在黄色的旁边，，而不从下面的代码中删除任何内容。这是不可能的，不是吗？顺便说一句，这种被称为变换的行为是什么，类似于相对定位的效果？如果我无法将其关闭，那么至少知道如何调用它会很棒。

＆＃13;

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

＆＃13;

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

＆＃13;

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不会漂浮在黄色旁边？

1 个答案: