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

我想#first要对齐#container和#second的左边。
为此，我在#first和float: right;上#second上使用float: left;。
但是，这会导致#first正好在它旁边的#container和#second的左边对齐。为什么会出现这种情况，我该如何实现我的愿望？使用float将div对齐到父div的左右边缘

这就是我想要的：

这就是我得到：

这里是我的代码：

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

来源

2016-11-14 Aazib

好吧，好吧。不需要创建一个包含浮点数的属性: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>

来源

2016-11-15 01:14:17 junkfoodjunkie

我想知道为什么'overflow：hidden;'工作并导致'＃容器'的高度恢复。你能帮助我吗？ – Aazib

当然有原因。你可以阅读这篇文章，它解释了大多数方法：https：//www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/ – junkfoodjunkie

假设#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是不工作，因为浮动：权和浮动：左简单地确定如何DOM元素与他们的兄弟姐妹互动;不是他们的父母。如果您希望#first和#second的子div不填充父div，则还可以将它们的height属性更改为任何所需的值。

来源

2016-11-14 23:39:37

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

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

来源

2016-11-14 23:41:32 Keammoort

junkfoodjunkie，在他的回答，提出了一个简单的样式恢复'＃container'的高度。使用它有什么缺点吗？ – Aazib

令人惊讶的是，这有时也做的伎俩。

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

来源

2016-11-14 23:49:43

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

回答

相关问题