繁体   English   中英

如何防止父元素的宽度影响子元素的宽度?

[英]How do I prevent a parent element's width from affecting the child's width?

我有一个<div>作为父母和一个<p>作为孩子。 <p>位于<div>的中心, max-width650px ,而<div>的宽度为800px

之前,我让<body>成为<p>的父对象,并且max-width按预期工作——当有一点文本时, <p>会非常小。 当有很多文本时, <p>宽度将 go 达到650px并形成一个新行。
现在,以<div>作为父级, <p>似乎自动max-width的一半,这是我不想要的。

此代码段包含一个 slider 以调整父级的width 您会注意到<p>会根据父级自动更改大小,这是我不想要的。 我希望<p>有一个独立的宽度而不明确设置它。 我尝试使用没有效果的!important来解决这个问题(正如预期的那样,但值得一试)。

 document.querySelector("input").oninput = event => { document.querySelector("div").style.width = event.target.value + "px"; }
 @import url("https://fonts.googleapis.com/css2?family=Cinzel&display=swap"); p { position: absolute; left: 50%; transform: translate(-50%, 0%); background-color: rgba(80, 80, 80, 0.75); text-align: center; font-size: 25px; max-width: 650px;important: width; auto:important; } div { position: absolute; background-color: #98765432; width: 1000px; height: 200px; }
 <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <input type="range" min="700" max="1000"> </div>

我可能会尝试的一种解决方案是使用 Javascript 和<canvas>来计算我想要设置的文本的宽度并以这种方式设置宽度。 但是,我想知道这是否可以在 CSS 中完成。

这里重要的信息是任何块级元素将自动采用其父级的全宽(如果提供了值,直到它们达到最大宽度)。

这意味着,如果您的父级 (div) 为 600px,而子级 (p) 的最大宽度为 650 像素,它仍将占用完整的 600 像素,因为这小于它定义的最大宽度,并且因为它是块级,它想占据整个宽度

要记住的另一件有用的事情是,如果您的布局开始变得复杂,有很多 css 规则,请花点时间先做一个简化版本(如我下面的示例),然后在此基础上构建

你可以这样做:

 div { border: 1px dashed #ddd; text-align: center; } p { max-width: 650px; display: inline-block; border: 1px dashed #ddd; }
 <div> <p> text </p> </div> <div> <p> lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text </p> </div>

或者像这样使用 flexbox

 div { border: 1px dashed #ddd; display: flex; justify-content: center; } p { max-width: 650px; border: 1px dashed #ddd; }
 <div> <p> text </p> </div> <div> <p> lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text </p> </div>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM