如何调整咨询表单大小并适配三列Flexbox布局（置于第三列）

步骤1：搭建三列Flex布局 #

先创建一个Flex容器作为父元素，内部包含三个列子元素，通过flex属性控制每列的宽度分配，这里设置三列等宽：

/* 三列Flex容器 */
.flex-container {
  display: flex;
  gap: 24px; /* 列之间的间距 */
  padding: 24px;
  min-height: 100vh; /* 让容器占满视口高度 */
  box-sizing: border-box;
}

/* 每列的基础样式 */
.flex-column {
  flex: 1; /* 三列等宽分配空间 */
  background-color: rgba(255,255,255,0.1); /* 可选：给列加背景便于区分 */
  border-radius: 4px;
  padding: 16px;
}

步骤2：调整表单适配第三列空间 #

修改原表单的.container样式，去掉多余外边距，让表单填满所在列的可用空间：

/* 修改表单容器样式 */
.container {
  padding: 12px 24px 24px 24px;
  margin: 0; /* 去掉原有的上下外边距，避免溢出列 */
  background: #C32F4B;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box; /* 确保内边距不增加容器宽度 */
}

完整代码示例 #

HTML部分

<!-- 三列Flex容器 -->
<div class="flex-container">
  <!-- 第一列 -->
  <div class="flex-column">
    <p style="color:white;">第一列内容</p>
  </div>
  <!-- 第二列 -->
  <div class="flex-column">
    <p style="color:white;">第二列内容</p>
  </div>
  <!-- 第三列：放置咨询表单 -->
  <div class="flex-column">
    <div class="container">
      <h3 style="color:white;">Contact Form</h3>
      <form action="#" name="contact_form">
        <label for="first_name">Name</label>
        <input name="name" type="text" required placeholder="John" />
        <br>
        <label for="email">Email</label>
        <input name="email" type="email" required placeholder="you@domain.com" />
        <br>
        <label for="contact_number">Contact Number</label>
        <input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901">
        <br>
        <label for="message">Message</label><br>
        <textarea name="message" cols="30" rows="10" placeholder="Enter your message here ..."></textarea>
        <div class="center">
          <input type="submit" value="Submit">
        </div>
      </form>
    </div>
  </div>
</div>

CSS部分

/* Importing the Roboto font from Google Fonts. */
@import url("https://fonts.googleapis.com/css?family=Roboto:400");

/* Set font of all elements to 'Roboto' */
* {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

/* Remove outline of all elements on focus */
*:focus {
  outline: 0;
}

body {
  background: #C32F4B;
}

h3 {
  text-align: center;
}

/* 三列Flex容器 */
.flex-container {
  display: flex;
  gap: 24px;
  padding: 24px;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 每列的基础样式 */
.flex-column {
  flex: 1;
  background-color: rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 16px;
}

/* 修改表单容器样式 */
.container {
  padding: 12px 24px 24px 24px;
  margin: 0;
  background: #C32F4B;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

/* Add styles to 'label' selector */
label {
  font-size: 0.85em;
  margin-left: 12px;
  color: white;
}

/* Add styles to 'input' and 'textarea' selectors */
input[type=text],
input[type=email],
input[type=tel],
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

/* Add styles to show 'focus' of selector */
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
textarea:focus {
  border: 1px solid green;
}

/* Add styles to the submit button */
input[type=submit] {
  background: #C32F4B;
  margin: 0 auto;
  outline: 0;
  color: white;
  border: solid 1px white;
  padding: 12px 24px;
  border-radius: 4px;
  transition: all ease-in-out 0.1s;
  position: relative;
  display: inline-block;
  text-align: center;
}

/* Add styles for 'focus' property */
input[type=submit]:focus {
  background: #A5D6A7;
  color: whitesmoke;
}

/* Style 'hover' property */
input[type=submit]:hover {
  background: #2196F3;
}

/* Align items to center of the 'div' with the class 'center' */
.center {
  text-align: center;
}

关键说明 #

• flex-container的display: flex开启Flex布局，gap控制列间距，避免margin带来的布局冲突
• flex-column的flex:1让三列平均分配容器宽度，也可以用flex-basis指定固定宽度（比如flex-basis: 300px）调整列宽
• 表单容器.container设置width:100%和box-sizing: border-box，确保表单完全填充第三列空间，不会超出列范围
• 统一了input和textarea的样式，减少重复代码

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