如何将其余元素的宽度基于标题的宽度？

Question

我有一些居中的div，它们的标题和标题下方的文本。标题居中，但文本在左侧对齐，并从标题开始处开始。我使用inline-block使div根据内容调整大小。但是，如果文本长于标题，则容器将根据文本（而不是标题）调整其宽度，因此，文本看起来比标题宽。如何保持宽度基于标题而不是文本？我在下面添加了我的代码以及一张错误绘制的图像，以更好地了解发生了什么。

HTML和CSS：

.projects {
  width: 30vw;
  left: 10vw;
  right: 10vw;
  margin: 50px auto 0 auto;
  text-align: center;
}

.pContent {
  display: inline-block;
  margin-bottom: 10px;
}

.pInfo {
  text-align: left;
}

<div class="projects">
  <h2>My Projects:</h2>
  <div class="pContent">
    <h3 id="p1" class="pTitle">Project Title</h3>
    <div id="p1Info" class="pInfo">
      <p class="desc">This is a project description Lorem Ipsum Dolor</p> 
      <p class="demo">View a demo of the project.</p>
    </div>
  </div>
  <br>
  <div class="pContent">
    <h3 id="p2" class="pTitle">Another Project Title</h3>
    <div id="p2Info" class="pInfo">
      <p class="desc">This is a project</p>
      <p class="demo">View.</p>
    </div>
  </div>
</div>

这里是我想要的以及实际发生的图像。

Answer 1

如何在容器中添加左填充和右填充

Answer 2

将word-break: break-word（或全部）添加到.pContent

Answer 3

您需要设置“最大宽度：325px;”和“宽度：100％”； “ .p1Info” div的请尝试以下代码段。只需替换CSS中的“ .p1Info”类，其余CSS相同-

   .pInfo {
        text-align: left;
        max-width: 325px;
        width: 100%;
    }