Question

在我的网页中，我有一个左右两部分，但它们不在同一个嵌套中。我希望左侧部分填充页面的25％，右侧部分填充宽度的其余部分简单地说75％并不是因为正确的部分也需要30px右margin。权限padding将无效，因为我的内容和background-color会溢出。
你知道如何解决这个问题吗？。left（蓝色）和.right（黄色）div应该始终完美地相遇，而.right需要将它保持在30px右margin。< / p>

body {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.main {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background-color: grey;
}

.left {
  position: absolute;
  top: 0;
  bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  left: 0;
  width: 25%;
  border-right: 1px solid #eeeeee;
  background-color: lightblue;
}

.right {
  position: absolute;
  width: 75%;
  right: 0px;
  top: 45px;
  bottom: 0;
  /*padding-right: 30px;*/
  margin-right: 30px;
  background-color: yellow;
}

<body>
  <div class="main">
    <div class="left">TEST</div>
  </div>
  <div class="right">TEST</div>
</body>

Answer 1

使用仅绝对位置创建布局不是一个好主意。例如，您可能更好地依赖flexbox：

＆＃13;

<div class="left">TEST</div>
<div class="right">TEST</div>

＆＃13;

body {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.main {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background-color: grey;
}

.left {
  position: absolute;
  top: 0;
  bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  left: 0;
  width: 25%;
  border-right: 1px solid #eeeeee;
  background-color: lightblue;
}

.right {
  position: absolute;
  width: calc(75% - 30px);
  right: 0px;
  top: 45px;
  bottom: 0;
  /*padding-right: 30px;*/
  margin-right: 30px;
  background-color: yellow;
}

＆＃13;

但是如果你想保留你的代码，你需要考虑宽度计算中的余量：

＆＃13;

<body>
  <div class="main">
    <div class="left">TEST</div>
  </div>
  <div class="right">TEST</div>
</body>

＆＃13;

get_yachts

＆＃13;

带边距和不同嵌套的宽度百分比

1 个答案: