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

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 -property，只需使用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: "";
}

看演示：

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

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

Answer 3

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

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

    #first {
        position:absolute;
        left:0;
        height:100%;
    }

    #second {
        position:absolute;
        right:0;
        height:100%;
    }

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

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 个解决方案

解决方案1
2 已采纳 2016-11-15 01:14:17

解决方案2
1 2016-11-14 23:41:32

解决方案3
0 2016-11-14 23:39:37

解决方案4
0 2016-11-14 23:49:43

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

问题描述

4 个解决方案

解决方案1 2 已采纳 2016-11-15 01:14:17

解决方案2 1 2016-11-14 23:41:32

解决方案3 0 2016-11-14 23:39:37

解决方案4 0 2016-11-14 23:49:43

解决方案1
2 已采纳 2016-11-15 01:14:17

解决方案2
1 2016-11-14 23:41:32

解决方案3
0 2016-11-14 23:39:37

解决方案4
0 2016-11-14 23:49:43