如何为div.information添加蓝色背景？（仿div.login样式）

问题描述 #

当前页面效果：

我想给右侧的<div class="information">元素添加蓝色背景，实现和左侧<div class="login">元素的棕色背景一样的效果，但用同样的方法设置后没生效，该怎么实现？

问题出在哪 #

你给information加背景看不到，核心是这个容器里的所有元素都是用固定margin-left/margin-top（包括负margin）硬定位到页面右侧的，容器本身没被内容撑开，也不在正确位置，背景自然显示不出来；而且你用负margin移动infoHead1，直接让它脱离了information容器的控制，等于这个元素和容器没关系了。

解决方法 #

改用Flex布局实现左右分栏，把information的内容真正纳入容器管理，再给容器加背景，具体修改后的完整代码如下：

修改后的CSS代码

@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
body {
  background-color: #DBE2EF;
  font-family: Lora;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* 用Flex让左右容器居中对齐 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px; /* 左右容器的间距 */
}

.login {
  padding: 10px;
  background-color: #A4907C;
  width: 500px;
  text-align: center;
}

.logintxt {
  padding-top: 15px;
}

.loginemailtxt {
  border: 1px solid black;
  width: 250px;
  height: 30px;
  margin-top: 20px;
  outline: none;
  border-radius: 5px;
  font-family: Lora;
}

.loginemailtxt::placeholder {
  color: black;
  padding-left: 3px;
}

.loginemailtxt:focus {
  border: 1px solid #3F72AF;
}

.loginpwdtxt {
  border: 1px solid black;
  width: 250px;
  height: 30px;
  margin-top: 50px;
  outline: none;
  border-radius: 5px;
  font-family: Lora;
}

.loginpwdtxt::placeholder {
  color: black;
  padding-left: 3px;
}

.loginpwdtxt:focus {
  border: 1px solid #3F72AF;
}

.loginbtn {
  width: 120px;
  height: 40px;
  border-radius: 10px;
  margin-top: 150px;
  background-color: #3F72AF;
  border: none;
  cursor: pointer;
  font-family: Lora;
}

.loginbtn:hover {
  background-color: #068FFF;
}

#loginNoEmail {
  position: fixed;
  background-color: #F24C3D;
  margin-left: 140px;
  margin-top: 15px;
  width: 215px;
  border-radius: 5px;
  visibility: hidden;
}

#loginNoPassword {
  position: fixed;
  background-color: #F24C3D;
  margin-left: 145px;
  margin-top: 105px;
  width: 205px;
  border-radius: 5px;
  visibility: hidden;
}

#loginIncorrectCreds {
  position: fixed;
  background-color: #F24C3D;
  margin-left: 145px;
  margin-top: 105px;
  width: 205px;
  border-radius: 5px;
  visibility: hidden;
}

/* 关键修改：给information容器加样式 */
.information {
  background-color: #3F72AF; /* 你需要的蓝色背景 */
  width: 500px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff; /* 可选：文字变白，和蓝色背景形成对比 */
}

.infoHead1, .infoHead2 {
  margin: 0;
  text-align: center;
}

.infoHead2 {
  background-color: yellow;
  width: 340px;
  padding-left: 5px;
  border-radius: 5px;
  color: #000; /* 黄色背景搭配黑字，保证可读性 */
  margin: 10px 0 30px;
}

.infoIcons1, .infoIcons2 {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin: 20px 0;
}

/* 把图标和文字分组，用Flex垂直排列 */
.infoIcons1 .icon-group, .infoIcons2 .icon-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.infoIcons1 i, .infoIcons2 i {
  font-size: 40px;
}

.infoIcons1 h6, .infoIcons2 h6 {
  margin: 0;
  text-align: center;
}

.information > h5 {
  margin-top: 30px;
  text-align: center;
}

修改后的HTML代码

<script defer src="https://use.fontawesome.com/releases/v6.4.0/js/all.js"></script>

<div class="container">
  <div class="login">
    <h2 class="textHead">MedConnect</h2>
    <h2 class="logintxt">Log In to Your Account</h2>
    <input type="text" class="loginemailtxt" name="email" placeholder="Email Address">
    <h5 id="loginNoEmail">Please enter your email address.</h5>
    <h5 id="loginNoPassword">Please enter your password.</h5>
    <h5 id="loginIncorrectCreds">Incorrect Email or Password</h5>
    <input type="password" class="loginpwdtxt" name="password" placeholder="Password">
    <button class="loginbtn" type="button" name="button">Log In</button>
    <h5 style="margin-top: 160px; font-family: Lora;">Don't have an Account? <u style="cursor: pointer;">Sign Up</u></h5>
    <h6 style="margin-top: 40px; font-family: Lora;">By clicking "Log In", you log back into your Existing Account</h6>
  </div>

  <div class="information">
    <h2 class="infoHead1">All-In-One</h2>
    <h2 class="infoHead2">Medical Consultancy Platform</h2>
    <div class="infoIcons1">
      <div class="icon-group">
        <i class="fa-solid fa-person"></i>
        <h6>Connect with <br>Consultants</h6>
      </div>
      <div class="icon-group">
        <i class="fa-solid fa-calendar-check"></i>
        <h6>Book Online Interactions <br>Anytime</h6>
      </div>
      <div class="icon-group">
        <i class="fa-solid fa-handshake-angle"></i>
        <h6>Volunteer as a <br>Verified Consultant</h6>
      </div>
    </div>
    <div class="infoIcons2">
      <div class="icon-group">
        <i class="fa-brands fa-youtube"></i>
        <h6>Self-Educate with <br>Resources</h6>
      </div>
      <div class="icon-group">
        <i class="fa-solid fa-file"></i>
        <h6>Get Personalised, Detailed <br>Prescriptions</h6>
      </div>
      <div class="icon-group">
        <i class="fa-solid fa-magnifying-glass"></i>
        <h6>Search for specific <br>Medical Help</h6>
      </div>
    </div>
    <h5>Non Profit • Start for Free • Cancel Anytime</h5>
  </div>
</div>

关键改动说明

1. 全局布局优化：给body加Flex布局，让左右容器自动居中，替代原来的硬编码margin定位，布局更稳定。
2. 修复information容器：给它设置宽度、背景色、内边距，并用Flex垂直排列内部元素，让容器被内容撑开，背景正常显示。
3. 重构内部元素：把原来用固定margin定位的图标和文字改成分组Flex布局，删掉所有硬编码的位置样式，让元素在容器内自适应排列，不再脱离容器。
4. 提升可读性：给蓝色背景的容器设置白色文字，黄色背景的标题设置黑色文字，保证内容清晰可读。

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