Question

我有以下登录页面：

显示的图像有backgroundiamge，因此它实际上不是缩小的div。因此，我必须使该图像位于div内，但始终具有固定宽度。然后，表单div必须响应，但表单输入div必须具有固定的宽度，并且始终显示在右面板的中央。像这样：

HTML如下：

<body class="page-login-v2 layout-full page-dark">

  <!-- Page -->
  <div class="page animsition" data-animsition-in="fade-in" data-animsition-out="fade-out">
    <div class="page-content">
      <div class="page-brand-info">
        <div class="brand">
          <img class="brand-img" src="../../assets/images/logo@2x.png" alt="...">
          <h2 class="brand-text font-size-40">Remark</h2>
        </div>
        <p class="font-size-20">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="page-login-main">
        <div class="brand visible-xs">
          <img class="brand-img" src="../../assets/images/logo-blue@2x.png" alt="...">
          <h3 class="brand-text font-size-40">Remark</h3>
        </div>
        <h3 class="font-size-24">Sign In</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <form method="post" action="login-v2.html">
          <div class="form-group">
            <label class="sr-only" for="inputEmail">Email</label>
            <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email">
          </div>
          <div class="form-group">
            <label class="sr-only" for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" name="password"
            placeholder="Password">
          </div>
          <div class="form-group clearfix">
            <div class="checkbox-custom checkbox-inline checkbox-primary pull-left">
              <input type="checkbox" id="remember" name="checkbox">
              <label for="inputCheckbox">Remember me</label>
            </div>
            <a class="pull-right" href="forgot-password.html">Forgot password?</a>
          </div>
          <button type="submit" class="btn btn-primary btn-block">Sign in</button>
        </form>
        <p>No account? <a href="register-v2.html">Sign Up</a></p>
        <footer class="page-copyright">
          <p>WEBSITE BY amazingSurge</p>
          <p>© 2016. All RIGHT RESERVED.</p>
          <div class="social">
            <a class="btn btn-icon btn-round social-twitter" href="javascript:void(0)">
              <i class="icon bd-twitter" aria-hidden="true"></i>
            </a>
            <a class="btn btn-icon btn-round social-facebook" href="javascript:void(0)">
              <i class="icon bd-facebook" aria-hidden="true"></i>
            </a>
            <a class="btn btn-icon btn-round social-google-plus" href="javascript:void(0)">
              <i class="icon bd-google-plus" aria-hidden="true"></i>
            </a>
          </div>
        </footer>
      </div>
    </div>
  </div>

这是样式：

.page-login-v2 {
  height: 100%;
}
.page-login-v2:before {
  background-image: url("../../images/login.jpg");
}
.page-login-v2.page-dark.layout-full:after {
  background-color: rgba(38, 50, 56, .6);
}
.page-login-v2 .page-brand-info {
  margin: 220px 100px 0 90px;
}
.page-login-v2 .page-brand-info .brand-img {
  vertical-align: middle;
}
.page-login-v2 .page-brand-info .brand-text {
  display: inline-block;
  margin: 11px 0 11px 20px;
  vertical-align: middle;
}
.page-login-v2 .page-brand-info p {
  max-width: 650px;
  opacity: .6;
}
.page-login-v2 .page-login-main {
  position: absolute;
  top: 0;
  right: 0;
  height: auto;
  min-height: 100%;
  padding: 150px 60px 180px;
  color: #76838f;
  background: #fff;
}
.page-login-v2 .page-login-main .brand {
  margin-bottom: 60px;
}
.page-login-v2 .page-login-main .brand-img {
  vertical-align: middle;
}
.page-login-v2 .page-login-main .brand-text {
  display: inline-block;
  margin: 11px 0 11px 20px;
  color: #62a8ea;
  vertical-align: middle;
}
.page-login-v2 form {
  width: 350px;
  margin: 45px 0 20px;
}
.page-login-v2 form > button {
  margin-top: 38px;
}
.page-login-v2 form a {
  margin-left: 20px;
}
.page-login-v2 footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 50px 60px;
  text-align: center;
}
.page-login-v2 .social .icon,
.page-login-v2 .social .icon:hover,
.page-login-v2 .social .icon:active {
  color: #fff;
}
@media (min-width: 992px) {
  .page-login-v2 .page-content {
    padding-right: 500px;
  }
}
@media (max-width: 768px) {
  .page-login-v2 .page-login-main {
    padding-top: 60px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .page-login-v2 .page-login-main {
    padding-top: 80px;
  }
  .page-login-v2 .page-brand-info {
    margin: 160px 0 0 35px;
  }
  .page-login-v2 .page-brand-info > p {
    color: transparent;
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .page-login-v2 .page-login-main {
    width: 100%;
    padding-top: 60px;
  }
  .page-login-v2 form {
    width: auto;
  }
}
@media (max-width: 480px) {
  .page-login-v2 .page-brand-info {
    margin: 220px 0 0;
  }
  .page-login-v2 .page-login-main {
    padding: 50px 30px 180px;
  }
  .page-login-v2 form {
    width: auto;
  }
  .page-login-v2 footer {
    margin: 50px 30px;
  }
}

****更新****

这是Codepen：

https://codepen.io/anon/pen/RXKaeL

关于如何实现所需布局的任何建议？欣赏

CSS左图像具有固定宽度和右内容动态

0 个答案: