使用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的左右邊緣

回答

相關問題