Question

我在另一个div里面有3个div。（＃leftbody，＃rightbody，＃lowerbody）左右身体都很好，但是即使我将左右边距设置为自动，我的下半身似乎也保持在左边。

.Header {
  background-color: #CCCCCC;
  width: calc(100%-16px);
  height: 100px;
  border-radius: 5px;
}
.MidBody {
  background-color: #141414;
  width: calc(100%-16px);
  height: 850px;
  margin-top: 3px;
  border-radius: 5px;
  position: relative;
}
.footer {
  background-color: #CCCCCC;
  width: calc(100%-16px);
  height: 50px;
  margin-top: 5px;
  border-radius: 5px;
}
#leftbody {
  background-color: #F1F1F1;
  width: 49%;
  height: 425px;
  left: 0;
  margin-top: 3px;
  margin-left: 3px;
  position: absolute;
  z-index: 1;
  border-radius: 5px;
  opacity: .25;
}
#rightbody {
  background-color: #F1F1F1;
  width: 49%;
  height: 425px;
  right: 0;
  margin-top: 3px;
  margin-right: 3px;
  position: absolute;
  z-index: 1;
  border-radius: 5px;
  opacity: .25;
}
#lowerbody {
  width: 98%;
  height: 49%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 430px;
  margin-bottom: 3px;
  border-radius: 5px;
  background-color: #F5F5F5;
  position: absolute;
}

<body>
  <div class="Header"></div>
  <div class="MidBody">
    <div id="leftbody"></div>
    <div id="rightbody"></div>
    <div id="lowerbody"></div>
  </div>
  <div class="footer"></div>

Answer 1

如果您将right: 0; left: 0;添加到其CSS规则中，它将会。

＆＃13;

.Header {
  background-color: #CCCCCC;
  width: calc(100%-16px);
  height: 100px;
  border-radius: 5px;
}
.MidBody {
  background-color: #141414;
  width: calc(100%-16px);
  height: 850px;
  margin-top: 3px;
  border-radius: 5px;
  position: relative;
}
.footer {
  background-color: #CCCCCC;
  width: calc(100%-16px);
  height: 50px;
  margin-top: 5px;
  border-radius: 5px;
}
#leftbody {
  background-color: #F1F1F1;
  width: 49%;
  height: 425px;
  left: 0;
  margin-top: 3px;
  margin-left: 3px;
  position: absolute;
  z-index: 1;
  border-radius: 5px;
  opacity: .25;
}
#rightbody {
  background-color: #F1F1F1;
  width: 49%;
  height: 425px;
  right: 0;
  margin-top: 3px;
  margin-right: 3px;
  position: absolute;
  z-index: 1;
  border-radius: 5px;
  opacity: .25;
}
#lowerbody {
  width: 98%;
  height: 49%;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 430px;
  margin-bottom: 3px;
  border-radius: 5px;
  background-color: #F5F5F5;
  position: absolute;
}

＆＃13;

<body>
  <div class="Header"></div>
  <div class="MidBody">
    <div id="leftbody"></div>
    <div id="rightbody"></div>
    <div id="lowerbody"></div>
  </div>
  <div class="footer"></div>

＆＃13;

即使上述工作原理，您可能还想使用其他方式进行布局而不是position: absolute，例如像这样，响应速度更快，流量更好。

＆＃13;

html, body {
  margin: 0;
}
.Container {
  padding-top: 8px;
  width: calc(100% - 16px);
  margin: 0 auto;
}
.Header {
  background-color: #CCCCCC;
  height: 100px;
  border-radius: 5px;
}
.MidBody {
  background-color: #141414;  
  height: 850px;
  margin-top: 3px;
  border-radius: 5px;
  display: flex;
}
.footer {
  background-color: #CCCCCC;
  height: 50px;
  margin-top: 5px;
  border-radius: 5px;
}
#leftbody {
  background-color: #F1F1F1;
  width: 50%;
  height: 425px;
  margin: 3px 3px 0 3px;
  z-index: 1;
  border-radius: 5px;
  opacity: .25;
}
#rightbody {
  background-color: #F1F1F1;
  width: 50%;
  height: 425px;
  margin: 3px 3px 0 3px;
  z-index: 1;
  border-radius: 5px;
  opacity: .25;
}
#lowerbody {
  height: 49%;
  margin-bottom: 3px;
  border-radius: 5px;
  background-color: #F5F5F5;
}

＆＃13;

<div class="Container">
  <div class="Header"></div>
  <div class="MidBody">
    <div id="leftbody"></div>
    <div id="rightbody"></div>
  </div>
  <div id="lowerbody"></div>
  <div class="footer"></div>
</div>

＆＃13;

为什么我的#lowerbody div不能居中？

1 个答案: