Question

我希望#first与#container左侧和#second左侧对齐。
为此，我在float: left;使用#first，float: right;使用#second。
但是，这会导致#first左侧#container和#second左侧对齐。为什么会这样，我怎样才能达到我想要的目标呢？

这就是我想要的：

这就是我得到的：

这是我的代码：

<head>
    <style>
        #container {
            width: 500px;
            margin: 0 auto;
            border: 1px solid #000;
        }

        #first {
            float: left;
        }

        #second {
            float: right:
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="first">
            <p>first</p>
        </div>
        <div id="second">
            <p>second</p>
        </div>
    </div>
</body>

Answer 1

好吧，好吧。无需为包含浮点数创建:after - 属性，只需在容器上使用overflow: hidden;即可。

<head>
    <style>
        #container {
            width: 500px;
            margin: 0 auto;
            border: 1px solid #000;
overflow: hidden;
        }

        #first {
            float: left;
        }

        #second {
            float: right;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="first">
            <p>first</p>
        </div>
        <div id="second">
            <p>second</p>
        </div>
    </div>
</body>

Answer 2

有两件事是错的。首先，你有一个冒号而不是附近的分号：

#second {
    float: right: // <- change ':' to ';'
}

修复之后你必须清除内容，因为两个div（#first和#second）都是浮动的，导致容器的高度为0。您可以使用以下样式实现此目的：

#container:after {
    display: table;
    clear: both;
    content: "";
}

参见演示：

＆＃13;

#container {
  width: 500px;
  margin: 0 auto;
  border: 1px solid #000;
}
#container:after {
  display: table;
  clear: both;
  content: "";
}
#first {
  float: left;
}
#second {
  float: right;
}

＆＃13;

<div id="container">
  <div id="first">
    <p>first</p>
  </div>
  <div id="second">
    <p>second</p>
  </div>
</div>

＆＃13;

Answer 3

假设#container位于相对位置，我们可以这样做以获得您想要的结果：

{{1}}

您当前的css无效，因为float：right和float：left只是确定DOM元素如何与其兄弟姐妹互动;不是他们的父母。如果你想让#first和#second的子节点不填充父div，你也可以将它们的高度属性改为你想要的任何东西。

Answer 4

令人惊讶的是，这也有时可以解决问题。

#container {
  width: 500px;
  margin: 0 auto;
  border: 1px solid #000;
}

#first {
  float: right;
}

#second {
  float: right:
}

<body>
    <div id="container">
        <div id="first">
            <p>goes right</p>
        </div>
        <div id="second">
            <p>goes left</p>
        </div>
    </div>
</body>

使用float将div与父div的左右边缘对齐

4 个答案: