有没有办法使div元素的宽度与html中其子元素的最大宽度相同？_Html_Css

有没有办法使div元素的宽度与html中其子元素的最大宽度相同？

html css

有没有办法使div元素的宽度与html中其子元素的最大宽度相同？,html,css,Html,Css,我的代码如下： <div id="latest-text"> <p id="text-wrapper"> <span style="display: inline-block;" id="title">ABFDFDFJEKJRKEREJRKE</span> <span style="display: inline-block;" id="subtitle">GJKJGKEJKEJFKAJKEJRE<

我的代码如下：

<div id="latest-text">
    <p id="text-wrapper">
      <span style="display: inline-block;" id="title">ABFDFDFJEKJRKEREJRKE</span>
      <span style="display: inline-block;" id="subtitle">GJKJGKEJKEJFKAJKEJRE</span>
    </p>
</div>



ABFDFDFJEKJRKEREJRKE
GJKJGKEJKEJEJFKAJJRE

我想将

#text wrapper

元素的宽度设置为

#title

或

#subtitle元素的更大宽度，但它的宽度似乎总是与#latest text
元素的宽度相同。有什么方法可以实现我的目标吗？
您可以使用JavaScript设置“文本包装器”的宽度。首先对“title”和“subtitle”的宽度进行测试，找出哪个更大，然后将较大的宽度分配给“text wrapper”
可以使用JavaScript动态获取宽度。更改示例中标题和副标题的文本，并观察文本包装器变大或变小
<html>
<head>
<title>Test</title>
<script language="javascript">

function setwidth()
{
    var wrapper=document.getElementById('text-wrapper').clientWidth;
    var title=document.getElementById('title').clientWidth;
    var subtitle=document.getElementById('subtitle').clientWidth;

    if (title>subtitle)
        document.getElementById('text-wrapper').style.width=title;
    else
        document.getElementById('text-wrapper').style.width=subtitle;
}

</script>
</head>
<body onload="setwidth()">

<div id="latest-text">
<p style="border:1px solid red;" id="text-wrapper">
This is the text-wrapper text 
<p>
  <span style="display: inline-block; border: 1px solid yellow;float:none;" id="title">ABFDFDFJEK</span>
  <p>
  <span style="display: inline-block; border: 1px solid blue;" id="subtitle">GEGJKJGKEJKEJFKAJKEJRE</span>
</p>
</div>

</body>
</html>


试验
函数setwidth（）
{
var wrapper=document.getElementById（'text-wrapper'）.clientWidth；
var title=document.getElementById（'title'）.clientWidth；
var subtitle=document.getElementById（'subtitle'）.clientWidth；
如果（标题>副标题）
document.getElementById（'text-wrapper'）.style.width=title；
其他的
document.getElementById（'text-wrapper'）.style.width=subtitle；
}

这是文本包装器文本

ABFDFJEK

GEGJKJGKEJEJFKAJJRE

这里回答了一个非常类似的问题，用户试图通过div内的跨距设置div的宽度。看看这是否对你有帮助
是的，你能做到。将其中一个跨距设置为block，将父p标记设置为inline block。让第二个跨距内联
<div id="latest-text">
  <p id="text-wrapper">
    <span id="title">ABFDFDFJEKJRKEREJRKE long, very long, very long</span>
    <span id="subtitle">GJKJGKEJKEJFKAJKEJRE</span>
  </p>
</div>

请参见Dabblet:
如果将块
元素放入内联块
元素中，内联块将展开以适合其中最宽的块
<h1>Original Structure</h1>
<div id="latest-text1">
    <p id="text-wrapper1">
      <span style="display: inline-block;" id="title1">ABFDFDFJEKJRKEREJRKE</span>
      <span style="display: inline-block;" id="subtitle1">GJKJGKEJKEJFKAJKEJRE</span>
    </p>
</div>

<h1>Same, but using <code>block</code></h1>
<div id="latest-text2">
    <p id="text-wrapper2">
      <span style="display: block;" id="title2">ABFDF DFJEKJ RKER EJRKE</span>
      <span style="display: block;" id="subtitle2">GJKJ GKEJKEJF KAJKEJRE</span>
    </p>
</div>

<h1>Restructured as HTML5</h1>
<p>This also gets rid of inline styles, which are a leading cause of nightmares.</p>
<section id="latest-text3">
    <header>
        <hgroup>
            <h1>ABFDF DFJEKJ RKER EJRKE</h1>
            <h2>GJKJ GKEJKEJF KAJKEJRE</h2>
        </hgroup>
    </header>
    <article>
        <p> ... the ... first ... paragraph ... </p>
        <p> ... the ... second ... paragraph ... </p>
    </article>
</section>

并不是绝对必要的，但它确实具有最高的语义意义
还有CSS
#latest-text1, #latest-text2, section#latest-text3 {
    margin: 1em;
    padding: 1em;
    border: 1px solid black;
}
#latest-text1 {
    background-color: #f0f0ff;
}
#latest-text2 {
    background-color: #f0fff0;
}
section#latest-text3 {
    background-color: #fff0f0;
}
#latest-text3  {
    display: inline-block; /* THE IMPORTANT ONE */
}

大多数CSS只是帮助将整个事情可视化，至少
HTML5可以通过使用
和适当的类来重做为HTML4，例如使用
和
问题是我事先不知道每个子元素的宽度。因此，我无法硬编码文本包装器的宽度。肯定有人会告诉您如何做到这一点，但似乎您以错误的方式接近DOM结构。如果这些确实是标题和副标题，则它们不应位于段落内，而应是
和（或2和3等，视情况而定）
#latest-text1, #latest-text2, section#latest-text3 {
    margin: 1em;
    padding: 1em;
    border: 1px solid black;
}
#latest-text1 {
    background-color: #f0f0ff;
}
#latest-text2 {
    background-color: #f0fff0;
}
section#latest-text3 {
    background-color: #fff0f0;
}
#latest-text3  {
    display: inline-block; /* THE IMPORTANT ONE */
}