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

【问题标题】：Issue with placing image next to submit form , next to each other将图像放在提交表单旁边的问题，彼此相邻
【发布时间】：2021-10-28 08:42:15
【问题描述】：

我一直在尝试将图像放置在类位置图像中在类位置形式的形式旁边。我已经尝试了很多不同的东西显示 flex ， float 方法没有任何效果对我来说，元素总是被挤在角落里即使我改变宽度也改变形状

 <div class ="submit-form">
<div class ="position-form">
  <form class ="form"action="https://formsubmit.co/jani.godojo@gmail.com" 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%;
  }

【问题讨论】：

这是我的 CSS 代码
.submit-form {border-radius:2%;背景颜色：#f2f2f2；填充：5%；显示：弯曲； }
这就是你的css吗？请直接将其添加到您的问题中
并非所有这些都是我在提交表单部分所拥有的，左侧是提交，右侧是图片a
你想达到什么目的，元素应该放在哪里？所有输入在彼此下方的表单和右侧表单旁边的图像？

标签： html css position element

【解决方案1】：

我建议您查看示例中的 cmets，尝试使用它并尝试习惯 flexbox。有很多有用的网站可以深入解释它，比如this

.submit-form {
  display: flex;  /*sets form and image next to each other*/  
  border-radius: 2%;
  background-color: #f2f2f2;
  padding: 5%;
}

form {
  display: flex;
  flex-direction: column; /*> elements in form beneath each other */
}

<div class="submit-form">
  <form class="form" action="https://formsubmit.co/jani.godojo@gmail.com" 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>

  <img src="images/add.jpg" style="width:20%;">
</div>

【讨论】：

是的，我昨晚真的用 flex box 解决了这个问题，这是一个很棒的工具

【解决方案2】：

.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;

【讨论】：