gpt4 book ai didi

html - 如何使固定位置的子 div 包裹在具有固定宽度的父 div 内

转载 作者:太空宇宙 更新时间:2023-11-04 12:35:41 25 4
gpt4 key购买 nike

我正在尝试将固定位置的子元素包装在父 div 中,而不会使它脱离 div。

我希望它表现得像未固定的 div,但我需要固定子元素并自动换行或调整大小,因为响应式网站需要它。所以这就是为什么我真的不想在可能的情况下出现溢出情况,因为我将在固定的 div 中右对齐内容

HTML

<div class="parent">
<div class="child">I am a child div with a 100% width</div>
</div>


<div class="parent">
<div class="child-unfixed">I am a child div that is unfixed (this is the desired affect I am after but using a fixed position if possible)</div>
</div>

CSS

.parent {
background:green;
padding:20px;
margin-bottom:20px;
margin-right:100px;
width:200px
}

.child {
background:yellow;
position:fixed;
width:100%;
text-align:right;
}
.child-unfixed {
background:pink;
}

Here is the JSfiddle

最佳答案

我遇到了这个问题,我想我会添加一个对我有用的解决方案,适用于任何可能找到它的人。我没有让子位置:固定,而是让父位置:固定,然后让子position:absolute。

这是我使用的代码:https://codepen.io/redclaycreative/pen/MLeEee

HTML

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

CSS

.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%);
}

关于html - 如何使固定位置的子 div 包裹在具有固定宽度的父 div 内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27296549/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com