Question

我有一个 <div> 作为父母，一个 <p> 作为孩子。 <p> 以 <div> 为中心，max-width 为 650px，<div> 的宽度为 800px。

以前，我让 <body> 养育 <p> 和 max-width 按预期工作 - 当有少量文本时，<p> 会非常小。当有很多文本时，<p> 的宽度会增加到 650px 并形成一个新行。
现在，以 <div> 作为父级，<p> 似乎自动 max-width 为父级宽度的一半，这是我不想要的。

此代码段包含一个用于调整父级 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 中完成。

Answer 1

这里的重要信息是，任何块级元素都将自动占据其父元素的全宽（如果提供了值，则直到它们达到最大宽度）。

这意味着，如果您的父级 (div) 是 600 像素，而子级 (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>

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

1 个答案: