提交表单与图片无法并排摆放，flex、float等布局方法均失效怎么解决

核心错误点 #

• flex属性位置错误：flex-wrap、align-content属于flex容器属性，只能作用于设置了display:flex的父元素.submit-form，写在子元素.position-form、img上不会生效
• 宽度冲突：img标签自带行内样式width:20%优先级高于CSS样式，导致图片实际宽度远小于预期，且.position-image未设置基础宽度，无法和表单等分父容器空间
• 选择器匹配错误：你写的input[type=text-inquiry]不存在，text-inquiry是textarea的name属性值，三个文本输入框的type为text，导致输入框样式完全未生效，布局错乱
• 表单元素宽度不合理：输入框、textarea设置为父元素.position-form的30%，在.position-form本身只占父容器50%宽度的前提下，表单元素实际宽度过窄，看起来被挤压

修正后代码 #

HTML部分 #

<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" alt="配图">
  </div>
</div>

CSS部分 #

.submit-form {
  border-radius: 2%;
  background-color: #f2f2f2;
  padding: 5%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
}
input[type=text], select, input[type=submit] {
  width: 100%;
  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: 100%;
  box-sizing: border-box;
}
.position-form{
  flex: 1;
  min-width: 300px;
}

.position-image {
  flex: 1;
  min-width: 280px;
  align-self: flex-start;
}
.position-image img{
  width: 100%;
  height: auto;
  display: block;
}

内容的提问来源于stack exchange，提问作者Jani