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

Question

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

3

我希望#first靠左侧与#container对齐，并使#second靠右侧。
为此，我在#first上使用了float: left;，并在#second上使用了float: right;。
然而这会导致#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>

- Aazib

4个回答

1

有两个问题。首先，在“:

”附近，您使用了冒号而不是分号。

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

在你修复问题之后，需要清除内容，因为两个div（#first和#second）都是浮动的，这会导致容器高度为0。你可以使用以下样式来解决这个问题：

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

See demo:

#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>

- Keammoort

junkfoodjunkie 在他的回答中，提出了一种更简单的方式来恢复 #container 的高度。使用它是否存在任何缺点？ - Aazib

0

假设 #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不填充父div，则还可以在它们上面更改高度属性为您想要的任何值。

- Luke Wood

0

令人惊讶的是，有时这也能奏效。

#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>

- Eduard Malakhov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- junkfoodjunkie · Accepted Answer

很好，很好。不需要为包含浮动元素创建: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>