时间戳

首页 > 解决方案 > 如何防止父元素的宽度影响子元素的宽度？

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

问题描述

我有一个<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 中完成。

标签： javascripthtmlcss

解决方案

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

这意味着，如果您的父级 (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>

推荐阅读