Question

HTML：

<html>
    <head>
            <link rel=stylesheet href='scarychildselector.css'>
    </head>
    <body>
            <div></div>
            <div></div>
            <div>
                    <div></div>
                    <div></div>
            </div>
    </body>
</html>

CSS：

div{
    height:50px;
    width:50px;
}

div:nth-child(1){
    float:left;
    background-color:green;
}

div:nth-child(2){
    float:right;
    background-color:red;
}

chrome中的输出：

我认为两个绿色框将以上下的方式位于窗口的左侧，而两个红色框将在窗口的右侧。

这里的问题是最后一个div向左浮动而不是向右浮动我很困惑为什么向左浮动？ background-color属性可以正常工作，并为div赋予红色，但float属性不起作用。我只想知道为什么我的代码会像这样，为什么该框不会浮动到右侧

Answer 1

您的代码和浮点数实际上以应有的方式工作。这个问题在您的理解范围内。我在下面添加的不是解决方案。我试图解释它的工作方式。请检查。立即检查代码并注释width: 150px;，然后再次运行，以便您了解其中的区别。

div {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 10px;
}
div:nth-child(1) {
  background-color: red;
  float: left;
}
div:nth-child(2) {
  background-color: green;
  float: right;
}
.wrapper {
  width: 150px; //Comment this line
}

<div></div>
<div></div>
<div class='wrapper'>
  <div></div>
  <div></div>
</div>

要同时对齐一侧的绿色框和另一侧的红色框，您需要将width: 100%赋予包装器（您注释的行），然后仅注释margin: 10px 。您可以看到如下所示。

div {
  display: inline-block;
  width: 50px;
  height: 50px;
}
div:nth-child(1) {
  background-color: red;
  float: left;
}
div:nth-child(2) {
  background-color: green;
  float: right;
}
.wrapper {
  width: 100%;
}

<div></div>
<div></div>
<div class='wrapper'>
  <div></div>
  <div></div>
</div>

您在给.wrapper设置宽度时弄错了，并且由于所有div的宽度均为50px，因此子div会分成两行。但是浮动是完美的。这就是我在第一个示例中试图说明的。

使用第n个孩子时，浮球不起作用

1 个答案: