Question

我有一个简单的问题。如何将登录表单div移到左侧并在页面中央放置一个垂直分隔符，并且仍然可以将内容放在页面的右侧？我想做的是使用display：inline但是当我使用display：inline in my wrapper div时它会破坏页面的设置。谢谢！

代码

＆＃13;

* {
  margin: 0;
  padding: 0;
}

*:focus {
  outline: none;
}

 ::placeholder {
  color: grey;
}

body {
  background-color: #ced4da;
}

.wrapper {
  height: 100vh;
  position: relative;
  background-color: red;
}

.login-form {
  background-color: green;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.email-input-field,
.password-input-field,
.submit-button {
  display: block;
}

input[type="email"],
input[type="password"] {
  border: none;
  background: white;
  height: 40px;
  font-size: 12px;
  margin-bottom: 8px;
  width: 250px;
  padding-left: 50px;
  color: grey;
}

input[type="submit"] {
  border: none;
  background-color: #3DBB96;
  height: 40px;
  width: 100%;
  font-size: 15px;
  font-weight: lighter;
  color: white;
}

＆＃13;

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="CSS/Login.css">
</head>

<body>
  <div class="wrapper">
    <div class="login-form">
      <form action="Login.php" method="POST">
        <div class="email-input-field">
          <input type="email" name="emailPost" placeholder="Email" required>
        </div>
        <div class="password-input-field">
          <input type="password" name="passwordPost" placeholder="Password" required>
        </div>
        <div class="submit-button">
          <input type="submit" value="Login">
        </div>
      </form>
    </div>
    <div class="splitter"></div>
  </div>
</body>

＆＃13;

Answer 1

我用flex来创建你需要的东西。您必须检查新的CSS和HTML（分隔符和右侧部分）以完全理解我所做的事情。

* {
  margin: 0;
  padding: 0;
}

*:focus {
  outline: none;
}

 ::placeholder {
  color: grey;
}

body {
  background-color: #ced4da;
}

.wrapper {
  height: 100vh;
  position: relative;
  background-color: red;
  display: flex;
  justify-content: space-around;
}

.wrapper .login-form,
.wrapper .right-side {
  width: 45%;
}

.login-form {
  background-color: green;
  padding: 10px;
}

.email-input-field,
.password-input-field,
.submit-button {
  display: block;
}

input[type="email"],
input[type="password"] {
  border: none;
  background: white;
  height: 40px;
  font-size: 12px;
  margin-bottom: 8px;
  color: grey;
  width: 100%;
}

input[type="submit"] {
  border: none;
  background-color: #3DBB96;
  height: 40px;
  width: 100%;
  font-size: 15px;
  font-weight: lighter;
  color: white;
}

.separator {
  width: 0px;
  border: 2px solid black;
}

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="CSS/Login.css">
</head>

<body>
  <div class="wrapper">
    <div class="login-form">
      <form action="Login.php" method="POST">
        <div class="email-input-field">
          <input type="email" name="emailPost" placeholder="Email" required>
        </div>
        <div class="password-input-field">
          <input type="password" name="passwordPost" placeholder="Password" required>
        </div>
        <div class="submit-button">
          <input type="submit" value="Login">
        </div>
      </form>
    </div>
    <div class="separator"></div>
    <div class="right-side">Right side content</div>
  </div>
</body>

Answer 2

使用Flexbox相对简单，我们不会在div.leftside上设置弹性值，因此它的宽度依赖于内容，splitter可以用边框表示，但是它是一个单独的元素打开更多样式可能性

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #1d1f20;
  color: #FFF;
}

*:focus {
  outline: none;
}

::placeholder {
  color: grey;
}

.main {
  display: flex;
  height: 100vh;
}

.rightSide {
  flex: 1 0 0%;
  background: #7e7eff;
}

.leftSide {
  background: #262658;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.splitter {
  background: grey;
  width: 10px;
}

.login-form {
  background-color: #1d1f20;
  border: 1px solid;
  padding: 10px;
}

.email-input-field,
.password-input-field,
.submit-button {
  display: block;
}

input[type="email"],
input[type="password"] {
  border: none;
  background: white;
  height: 40px;
  font-size: 12px;
  margin-bottom: 8px;
  width: 250px;
  padding-left: 50px;
  color: grey;
}

input[type="submit"] {
  border: none;
  background-color: #3DBB96;
  height: 40px;
  width: 100%;
  font-size: 15px;
  font-weight: lighter;
  color: white;
}

<div class="main">
  <div class="leftSide">
    <div class="login-form">
      <form action="Login.php" method="POST">
        <div class="email-input-field">
          <input type="email" name="emailPost" placeholder="Email" required>
        </div>
        <div class="password-input-field">
          <input type="password" name="passwordPost" placeholder="Password" required>
        </div>
        <div class="submit-button">
          <input type="submit" value="Login">
        </div>
      </form>
    </div>
  </div>
  <div class="splitter"></div>
  <div class="rightSide">


  </div>
</div>

使用CSS Grid

可以实现相同

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #1d1f20;
  color: #FFF;
}

*:focus {
  outline: none;
}

::placeholder {
  color: grey;
}

.main {
  display: grid;
  height: 100vh;
  grid-template-columns: auto auto 1fr;
}

.rightSide {
  background: #7e7eff;
}

.leftSide {
  background: #262658;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.splitter {
  background: grey;
  width: 10px;
}

.login-form {
  background-color: #1d1f20;
  border: 1px solid;
  padding: 10px;
}

.email-input-field,
.password-input-field,
.submit-button {
  display: block;
}

input[type="email"],
input[type="password"] {
  border: none;
  background: white;
  height: 40px;
  font-size: 12px;
  margin-bottom: 8px;
  width: 250px;
  padding-left: 50px;
  color: grey;
}

input[type="submit"] {
  border: none;
  background-color: #3DBB96;
  height: 40px;
  width: 100%;
  font-size: 15px;
  font-weight: lighter;
  color: white;
}

<div class="main">
  <div class="leftSide">
    <div class="login-form">
      <form action="Login.php" method="POST">
        <div class="email-input-field">
          <input type="email" name="emailPost" placeholder="Email" required>
        </div>
        <div class="password-input-field">
          <input type="password" name="passwordPost" placeholder="Password" required>
        </div>
        <div class="submit-button">
          <input type="submit" value="Login">
        </div>
      </form>
    </div>
  </div>
  <div class="splitter"></div>
  <div class="rightSide">


  </div>
</div>

编辑：

我们在弯曲容器内对齐内容的方式是：align-self在flex项目上或aling-items在flexed容器上，现在因为flexbox只在一个方向上垂直或水平，我们改变了使用flex-direction属性，我们垂直放置一个并按照我们的喜好对齐项目，然后水平放置另一个并按照我们喜欢的方式对齐项目。

我试着让自己的例子变得有点干净？

最好是找一个关于flexbox的课程，google或在youtube上寻找它（在那里我学到了我知道的一切）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #1d1f20;
  color: #FFF;
}

.main {
  height: 100vh;
  background-color: pink;
  display: flex;
}

.main>.left {
  flex: 1;
  display: flex;
  background: brown;
}

.main>.left>.form-wrapper {
  flex: 1;
  background: orange;
  padding: 10px;
  align-self: center;
  display: flex;
  flex-direction: column;
}

.main>.left>.form-wrapper>form {
  background: #1d1f20;
  padding: 10px;
  width: 200px;
  align-self: flex-end;
}

.main>.left>.form-wrapper>form>input {
  margin-bottom: 5px;
  width: 100%;
}

.main>.split {
  width: 5px;
  background: #00ff74;
}

.main>.right {
  flex: 1;
  background: purple;
  display: flex;
}

.main>.right>.welcome {
  flex: 1;
  background: #2d162d;
  align-self: center;
  display: flex;
  flex-direction: column;
}

.main>.right>.welcome>h2 {
  background: #9a7d9a;
  align-self: center;
}

<div class="main">

  <div class="left">
    <div class="form-wrapper">
      <form>
        <input type="text" placeholder="Name" name="">
        <input type="text" placeholder="Email" name="">
        <input type="button" value="Done !" name="">
      </form>
    </div>
  </div>
  <div class="split"></div>
  <div class="right">
    <div class="welcome">
      <h2>Welcome !</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
    </div>
  </div>

</div>

Answer 3

您应该查看Flexbox或其他选项。 W3有两种方法可以在他们的howto文章中设置两列布局：https://www.w3schools.com/howto/howto_css_two_columns.asp

同时结帐complete guide to flexbox from css-tricks

如何在页面中间插入垂直线并向左移动表格（css）

3 个答案: