爲什麼我的浮動代碼不工作？

Question

我瘋了，試圖弄清楚爲什麼這段代碼不能將這兩個div並排放置。我瘋了嗎？這是一個明顯的修復？請幫忙！謝謝

<div id="masth" align="right"> 
    <div id="mastleft">Creativene is a place for artists and art enthusiasts to come together to buy and sell art.<br> 
    <br> 
    Sign-up today!</div> 

    <div id="mastright"><img src="images/masthead.png" width="50%" height="50%"> 
    </div> 
    </div> 


<style> 
    #masth { 
    background: #F0F0F0; 
    border-radius: 50px; 
    width:100%; 
    padding: 30px; 
    } 

    #mastright { 
    float: left; 
    } 
</style> 

Answer 1

浮動元素應該在它們相對浮動元素之前被定義，例如，

<div> 
    <div id="mastright">...</div> <--- defined first 
    <div id="mastleft"> ...</div> 
</div> 

Answer 2

div元素有一個隱含的新行附加到它們。如果要將元素放在同一行上，請改爲使用<span>...</span>。

Answer 3

<div id="masth" align="right"> 
    <div id="mastleft">Creativene is a place for artists and art enthusiasts to come together to buy and sell art.<br> 
    <br> 
    Sign-up today!</div> 
    <div id="mastright"><img src="images/masthead.png" width="50%" height="50%"> </div> 
</div> 
<style> 
    #masth { 
    background: #F0F0F0; 
    border-radius: 50px; 
    width:450px; 
    margin:0px auto; 
    padding: 30px; 
    overflow:hidden; 
    } 
    #mastleft{ 
     float:right; 
     width: 50%; 
     margin: 20px; 
    } 
    #mastright { 
    float: right; 
    width:150px; 
    height:150px; 
    background:red; 
    } 
</style>