Question

这个问题非常令人讨厌。没关系我不知道该怎么问这个问题。

如何产生这种效果？

在下面的 CODE 上：-

<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>Facebook</title>
</head>

<body>
  <div id="upper-part">
    <img src="https://cdn.worldvectorlogo.com/logos/facebook-1.svg" alt="Facebook Logo" width="250px" />
    <table>
      <tr>
        <td>Email or Phone</td>
        <td>Password</td>
        <td></td>
      </tr>
      <tr>
        <td><input type="text" /></td>
        <td><input type="password" /></td>
        <td><input type="submit" /></td>
      </tr>
      <tr>
        <td></td>
        <td>Forgotten Password?</td>
        <td></td>
      </tr>
    </table>
  </div>
  <h2>Facebook helps you connect and share with the people in your life.</h2>
  <img src="Images/Facebook-img2.png" alt="We are all connected!" />
  <h1>Create and Account</h1>
  <h2>It's free and always will be.</h2>
  <table>
    <tr>
      <td><input type="text" placeholder="First name" /></td>
      <td><input type="text" placeholder="Surname" /></td>
    </tr>
    <tr>
      <td colspan="2"><input type="text" placeholder="Mobile number or email address" /></td>
    </tr>
    <tr>
      <td colspan="2"><input type="password" placeholder="New Password" /></td>
    </tr>
  </table>
</body>

</html>

在 DIV 内，这就是我想更改为图片中的内容。我还在另一个无法正常工作的代码文件中添加了一些CSS。就像我放大时表格中的表格转移到下一行一样。

Answer 1

使用绝对单位表示尺寸（例如“ px”）

.wrapper{
  display: flex;
  
  width: 200px; //!

}

.el1{
  background-color: #99a;
  width: 50%;
  height: 30px;
}

.el2{
  background-color: #a99;
  width: 50%;
  height: 30px;
}

<div class="wrapper">
  <div class="el1">
    Some Text
  </div>
  <div class="el2">
    Another Text
  </div>
</div>

变焦时如何保持一切大小和位置

1 个答案: