html - 使用materializecss显示与登录表单对齐的图像

Question

您可以在此处查看完整代码 http://codepen.io/anon/pen/BjqxOq

我已经使用 MaterializeCSS 创建了一个登录页面，现在我想显示与登录表单对齐的图像。但是当我尝试这样做时，它会显示一个在另一个之上，如屏幕截图所示。

此外，我确实做了一些更改，例如我向图像添加了 class="rightalign"，因为图像移到了右侧，但我无法将登录表单与图像对齐。

   <div>
    <img src="images/one.png" height="480" width="580">
   </div>

   <div id="login-page" class="row">
    <div class="col s12 z-depth-6 card-panel">
     <form class="login-form">
      <div class="row">
       <div class="input-field col s12 center">
         <h3 class="left login-form-text">Login</h3>
       </div>
     </div>

    <div class="row margin">
      <div class="input-field col s4">
        <i class="mdi-social-person-outline prefix"></i>
         <input class="validate" id="email" type="email" >
          <label for="email" data-error="wrong" data-success="right" class="center-align">Email</label>
      </div>
     </div>

    <div class="row margin">
      <div class="input-field col s4">
        <i class="mdi-action-lock-outline prefix"></i>
         <input id="password" type="password" >
         <label for="password">Password</label>
      </div>
    </div>

    <div class="row">         
      <div class="input-field col s12 m12 l12  login-text">
        <input type="checkbox" id="remember-me" />
          <label for="remember-me">Remember me</label>
      </div>
    </div>

    <div class="row">
      <div class="input-field col s1">
        <a href="" class="btn waves-effect waves-light grey darken-2 col s12">Login</a>
      </div>
     </div>
    </div>

Answer 1

您需要将列表放在包含表单和图像的 div 周围，由于元素的复杂性，这将很困难...这篇文章在这里怎么样？ How to get these two divs side-by-side?这行得通吗？