Html 如何在具有固定宽度的父div内创建固定位置的子div环绕_Html_Css

Html 如何在具有固定宽度的父div内创建固定位置的子div环绕

html css

Html 如何在具有固定宽度的父div内创建固定位置的子div环绕,html,css,Html,Css,我试图将固定位置的子元素包装在父div中，而不使其脱离div 我希望它的行为像div，这是不固定的，但我需要的子元素是固定的，并自动包装或调整大小，因为我将需要它的响应网站。这就是为什么我真的不想做一个溢出的情况，如果可能的话，因为我将在固定的div中有右对齐的内容 HTML 位置：固定不能在div中。它粘在窗口上，不能粘在html元素上看固定的不要为元素留空间。相反，将其放置在相对于屏幕视口的指定位置，滚动时不要移动它。打印时，将其放置在每页的固定位置尝试移除位置：固定如另一个答案中

我试图将固定位置的子元素包装在父div中，而不使其脱离div

我希望它的行为像div，这是不固定的，但我需要的子元素是固定的，并自动包装或调整大小，因为我将需要它的响应网站。这就是为什么我真的不想做一个溢出的情况，如果可能的话，因为我将在固定的div中有右对齐的内容

HTML

位置：固定不能在div
中。它粘在窗口上，不能粘在html元素上
看
固定的
不要为元素留空间。相反，将其放置在相对于屏幕视口的指定位置，滚动时不要移动它。打印时，将其放置在每页的固定位置

尝试移除位置：固定
如另一个答案中所示，然后将max width
设置设置为父div和padding的差值
手动设置为460像素（每侧填充20像素）
您可以使用其他一些东西来帮助布局：

使用calc
[max width:calc（x-y）；]函数计算max width
，以便更动态地使用
框大小：边框框以帮助确定区域的真实大小，并在最终的大小计算中包含填充和边距

起初，我认为没有办法做到这一点，因为它的行为类似于一个绝对div，并占据了页面的元素
但似乎宽度上的继承起了作用
width: inherit;

我遇到了这个问题，我想我会为任何可能找到这个问题的人添加一个适合我的解决方案。我没有使子位置：固定，而是使父位置：固定，然后使子位置：绝对
以下是我使用的代码：
HTML
<body>
  <div class="parent shadow">
    <h1 class="child">東京からこんにちは</h1>
  <div>
</body>

删除父div的最大宽度？固定位置与绝对位置类似。他们需要一件上衣；左边正确的；底部。这可能不是你想要的。我想看看这篇关于位置的文章，就像其他人所说的，使用“固定”位置的问题在于它会将元素从流程中移除。因此，您无法将其父对象定位在它周围，因为它好像没有父对象。
width: inherit;

<body>
  <div class="parent shadow">
    <h1 class="child">東京からこんにちは</h1>
  <div>
</body>

.parent {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 500px;
  max-width: 90%;
  height: 300px;
  background-color: #C6312D;
  -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.child {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  max-width: 90%;
  text-align: center;
  color: #fff;
  -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}