如何并排对齐图像和表单，即使在移动视图和桌面等不同视图中也应该完美对齐

Question

<div class="box"> 
    <p>contact us</p> 
<form>
   <div>
    <input type="text" name="" required=""> 
    <label>firstname</label>
  </div>
  <div>
    <input type="text" name="" required=""> 
    <label>last name</label>
  </div>
  <div>
    <input type="text" name="" required=""> 
    <label>mail</label>
  </div>
  <div class="button">
  <button type="button">submit <span>&#10230;</span></button>
</div>

</form>

</div>

<div class="clearfix">
    <img src="https://www.fnordware.com/superpng/pnggrad8rgb.png"  >
</div>

<style>
 
img{
    float: right;
     width:40%;
     height:a;
    margin-right: 190px;
    margin-top:83px;
    height:475px;
    cursor: pointer;
    }
    span{
      content: "F6";
}
label{
        padding-left: 10px;
        font-size:16px;
       padding-top: 10px;
    }

.box
{
position: absolute;
top: 50%;
Left: 25%;
height:475px;
transform: translate(-50%, -50%);
background:green;
padding: 40px;
box-sizing: border-box; 
margin-left:1%;
cursor: pointer;
}
.box p
{
font-family: 'jmsans', sans-serif;
padding: 0;
margin: 0 0 40px; 
color: white;
font-size: 40px;
width: 467px;
}
.box input
{
margin-bottom: 30px;
width:466px;
box-sizing: border-box;
box-shadow: none;
border: none; 
border-bottom: 2px solid #999;
outline: none;
padding-left: 10px;
font-weight: bold;
height: 56px;
}
.box input[type="submit"]
{
border-bottom: none; 
cursor: pointer;
color: #fff;
margin-bottom: 0;
}
.box form div
{
position: relative;
}
.box form div label
{
position: absolute; 
top: 10px;
Left: 0; 
color: #999; 
transition: .5s; 
pointer-events: none;
}

</style>

如果我检查代码并检查其在不同视图（移动和桌面）中的响应能力，由于代码错误，图像和表单未对齐如何解决此问题如果我检查代码并检查其在不同视图（移动和桌面）中的响应能力，由于代码错误，图像和表单未对齐如何解决此问题

Answer 1

您的主要 box 容器设置为 position: absolute 并且图像上不存在几个定位属性，这可能就是一切都在变化的原因。我不知道这个表单和图像还会被放入什么，但它们在你的例子中似乎不是必需的，所以我删除了它们并添加了一个 flexbox .flexContainer 来包装你的内容，这有助于让您的内容在一行中对齐。您可以更进一步，添加一个 @media 查询 (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) 来控制图像在移动设备上的反应（例如，将 flex-direction 更改为 column，这样图像出现在联系人框下方，而不是在较小的屏幕上向内拉伸。 `

.flexContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

img {
  width: 100%;
  height: auto;
  height: 475px;
  cursor: pointer;
}

span {
  content: "F6";
}

label {
  padding-left: 10px;
  font-size: 16px;
  padding-top: 10px;
}

.box {
  height: 475px;
  background: green;
  padding: 40px;
  box-sizing: border-box;
  margin-left: 1%;
  cursor: pointer;
}

.box p {
  font-family: 'jmsans', sans-serif;
  padding: 0;
  margin: 0 0 40px;
  color: white;
  font-size: 40px;
  width: 467px;
}

.box input {
  margin-bottom: 30px;
  width: 466px;
  box-sizing: border-box;
  box-shadow: none;
  border: none;
  border-bottom: 2px solid #999;
  outline: none;
  padding-left: 10px;
  font-weight: bold;
  height: 56px;
}

.box input[type="submit"] {
  border-bottom: none;
  cursor: pointer;
  color: #fff;
  margin-bottom: 0;
}

.box form div {
  position: relative;
}

.box form div label {
  position: absolute;
  top: 10px;
  left: 0;
  color: #999;
  transition: 0.5s;
  pointer-events: none;
}

<div class="flexContainer">
  <div class="box">
    <p>contact us</p>
    <form>
      <div>
        <input type="text" name="" required="">
        <label>firstname</label>
      </div>
      <div>
        <input type="text" name="" required="">
        <label>last name</label>
      </div>
      <div>
        <input type="text" name="" required="">
        <label>mail</label>
      </div>
      <div class="button">
        <button type="button">submit <span>&#10230;</span></button>
      </div>

    </form>
  </div>

  <div>
    <img src="https://www.fnordware.com/superpng/pnggrad8rgb.png">
  </div>
</div>

如何并排对齐图像和表单，即使在移动视图和桌面等不同视图中也应该完美对齐

How to align image and form side by side and it should also be perfectly aligned even in different views like mobile view and desktop

html

css

jquery

frontend

web-frontend