Question

将相对div中的固定div与右对齐的最佳方法是什么，同时仍保留继承的max-width？

更新（2018年1月24日）：我已用解决方案回答了这个问题。请参阅here。

请参阅以下代码段以获取进一步参考：

＆＃13;

body {
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  width: 100%;
}

.max-width {
  margin: 0 auto;
  max-width: 500px;
  height: 1000px;
  position: relative;
  box-sizing: border-box;
  background-color: lightgrey;
}

.box {
  max-width: inherit;
  width: 20%;
  height: 20px;
  position: fixed;
  background: blue;
  float: right;
  color: white;
  text-align: center;
  right: 0;
}

＆＃13;

<div class="container">
  <div class="max-width">
    <div class="box">fix to right?</div>
  </div>
</div>

＆＃13;

Answer 1

固定元素的位置始终相对于视口/窗口，永远不会相对于任何其他元素。

你能做的唯一事情（使用CSS）是使用max-width使其位置正确对齐500px宽中心＆＃34;父＆＃34;的右边界。元素，但只有当屏幕宽度或等于＆＃34;父母的right: 0时才会有效。元件。

评论后添加：另外为body { margin: 0; padding: 0; border: 0; } .container { width: 100%; } .max-width { margin: 0 auto; max-width: 500px; height: 1000px; position: relative; box-sizing: border-box; background-color: lightgrey; } .box { max-width: inherit; width: 20%; height: 20px; position: fixed; top: 0; right: calc(50% - 250px); background: blue; float: right; color: white; text-align: center; } @media (max-width: 500px) { .box { right: 0px; } }的宽度低于500px的屏幕添加媒体查询（感谢@MrLister）

＆＃13;

<div class="container">
  <div class="max-width">
    <div class="box">fix to right?</div>
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

如果你这样做会怎么样：

的CSS

body {
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  width: 100%;
}

.max-width {
  margin: 0 auto;
  max-width: 500px;
  height: 1000px;
  position: relative;
  box-sizing: border-box;
  background-color: lightgrey;
}

.box {
  max-width: inherit;
  width: 20%;
  height: 20px;
  position: fixed;
  top: 0;
  right: calc(50% - 250px);
  background: blue;
  float: right;
  color: white;
  text-align: center;
}

@media screen and (max-width: 500px) {
.box {
      right: 0;
    }
}

@media screen and (min-width: 501px) {
.box {
      width: 100px; /* 100px is 20% of the max-width */
    }
}

HTML

<div class="container">
  <div class="max-width">
    <div class="box">fix to right?</div>
  </div>
</div>

Answer 3

找出一些东西。毕竟它可以完成！

body {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
}

.max-width {
  max-width: 500px;
  height: 2000px;
  margin: auto;
  background-color: lightgrey;
  position: relative;
}

.box1 {
  position: relative;
  width: 20%;
  height: 100px;
  background-color: yellow;
  text-align: center;
}

.container {
  position: absolute;
  width: 60%;
  background-color: purple;
  height: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}

.wrap-box {
  position: fixed;
  max-width: 500px;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.wrap-box > div.box2 {
  width: 20%;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
}

.wrap-box > div.box3 {
  width: 20%;
  height: 100px;
  background-color: green;
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: center;
}

<div class="max-width">
  <div class="box1">position: relative, width: 20%</div>
  <div class="container">
    position: absolute, width: 60%
    <div class="wrap-box">
      <div class="box2">position: fixed (top), width: 20%</div>
      <div class="box3">position: fixed (bottom), width: 20%</div>
    </div>
  </div>
</div>

将最大宽度应用于相对定位Div内的固定位置Div？

3 个答案: