css-float - 为什么我的浮动代码不起作用？

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 元素有一个隐含的新行附加到它们。如果您希望元素位于同一行，请<span>...</span>改用。

Answer 2

浮动元素应该在它们相对浮动的元素之前定义，例如

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

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>