html - 将图像放在提交表单旁边的问题，彼此相邻

Question

我一直在尝试将图像放置在类位置图像中的类位置图像中。我尝试了很多不同的东西显示flex，float方法对我没有任何作用，即使我改变宽度，元素总是被挤压在角落并改变形状

 <div class ="submit-form">
<div class ="position-form">
  <form class ="form"action="https://formsubmit.co/[e-mail]" method="POST">
    <input type="text" id="fname"placeholder="Enter your first 
    name"required>
    <input type="text" id="lname"placeholder="Enter your last name" 
     required>
    <input type="text" id="email"placeholder="Enter your email" 
    required>
    <textarea name ="text-inquiry" rows ="10" wrap ="hard" 
  placeholder="Write your inquiry here..."></textarea>
    <input type="submit" value="Submit">
  </form>
</div> 
  <div class ="position-image"><img src="images/add.jpg" style 
 ="width:20%;"></div>
 </div>

   .submit-form {
    border-radius:2%;
    background-color: #f2f2f2;
    padding: 5%;
    display: flex;
    }
    input[type=text-inquiry], select {
    width: 30%;
    height:50%;
    padding: 12px 20px;
    margin: 8px 0;
    display: block;
    border: 1px solid rgb(192, 192, 192);
    border-radius: 4px;
    box-sizing: border-box;
    }
    .form > textarea{
    width:30%;
    }
   .position-form{
   flex-wrap: wrap;
   align-content: flex-start;
   width:50%;}

  .position-image img{
  flex-wrap: wrap;
  align-content: flex-start;
  width:50%;
  }

标签： htmlcsspositionelement

Answer 1

.flex-class{
 display:flex;
 align-content: center;
 justify-content: space-around;
 padding-bottom: 40px;
 }
 #column-residential{
  border-radius: 5px;
  padding:15px;
  width: 400px;
  background-color:#eeeeee;
   }
  #column-commercial{
   border-radius: 5px;
   padding:15px;
   width: 400px;
   background-color: #eeeeee;