Html 如何根据标题的宽度确定其余元素的宽度?

Html 如何根据标题的宽度确定其余元素的宽度?,html,css,Html,Css,我有一些居中的div,它们的标题和下面的文本。标题居中,但文本在左侧对齐,并从标题开始的位置开始。我使用inline block根据内容调整div的大小。但是,如果文本比标题长,则容器会根据文本而不是标题调整其宽度,因此文本看起来比标题宽。如何根据标题而不是文本保持宽度?为了更好地理解所发生的事情,我在下面加入了我的代码以及一张画得很糟糕的图片 HTML和CSS: .projects{ 宽度:30vw; 左:10vw; 右:10vw; 保证金:50px自动0自动; 文本对齐:居中; } P.内

我有一些居中的div,它们的标题和下面的文本。标题居中,但文本在左侧对齐,并从标题开始的位置开始。我使用
inline block
根据内容调整div的大小。但是,如果文本比标题长,则容器会根据文本而不是标题调整其宽度,因此文本看起来比标题宽。如何根据标题而不是文本保持宽度?为了更好地理解所发生的事情,我在下面加入了我的代码以及一张画得很糟糕的图片

HTML和CSS:

.projects{
宽度:30vw;
左:10vw;
右:10vw;
保证金:50px自动0自动;
文本对齐:居中;
}
P.内容{
显示:内联块;
边缘底部:10px;
}
pInfo先生{
文本对齐:左对齐;
}

我的项目:
项目名称

这是一个项目描述Lorem Ipsum Dolor

查看项目的演示


另一个项目名称

这是一个项目

查看


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

添加
分词:将word
(或全部分词)添加到
。pContent
您需要设置“.p1Info”div的“max width:325px”和“width:100%”。请尝试下面的代码片段。只需替换CSS中的“.p1Info”类,其余CSS将相同-

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

我希望这能解决您的疑问:

.projects{
宽度:30vw;
左:10vw;
右:10vw;
保证金:50px自动0自动;
文本对齐:居中;
}
普蒂特尔先生{
宽度:100%;
显示器:flex;
证明内容:中心;
}
.p1Info{
宽度:100%;
}

我的项目:
项目标题DSDASDSADS asdsa asd asd asdsa dasdsad sdsad SAD SAA sadsa asdsadsa ASDSADASSDSAL

这是一个项目描述Lorem Ipsum Dolorhis是一个项目描述Loremhis是一个项目描述Lorem

查看项目的演示


另一个项目名称

这是一个项目描述Lorem Ipsum Dolor

查看项目的演示


问题是每个div的标题宽度不同,因此如果我为其中一个添加填充,其他div也将获得相同的填充。这不起作用,即使这样的解决方案有效,也必须为每个pContent div单独定制,因此如果我添加大量项目,这将成为一个问题。我想知道是否有一个解决方案可以调整我添加到标题宽度的任何新项目。我不这么认为。如果许多产品添加,它将导致一个问题。你能澄清你的观点吗?