Question

我的代码如下：

<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>

我想将#text-wrapper元素的宽度设置为#title或#subtitle element的较大宽度，但似乎其宽度始终与#latest-text的宽度相同元件。有没有办法实现我的目标？

Answer 1

是的，你可以这样做。将其中一个跨距设置为阻止，将父p标记设置为内联块。让第二个跨度为内联。

<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>

的CSS：

#text-wrapper {
  display: inline-block;
}

span#title {
  display: block;
}

见Dabblet：http://dabblet.com/gist/4694336

Answer 2

您可以使用JavaScript来设置“text-wrapper”的宽度。首先对“标题”和“副标题”的宽度进行测试以找出哪个更大然后将较大的宽度分配给“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>

Answer 3

这里回答了一个非常类似的问题，用户试图通过其中的跨度来设置div的宽度。看看这对你有帮助。

How to set width of DIV to span with text inside it (so not fixed)

Answer 4

如果将block元素放在inline-block元素内，则内联块将展开以适应其中最宽的块。

<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>

<hgroup>并非绝对必要，但它确实具有最大的语义意义。

和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只是为了帮助在http://jsfiddle.net/J3NzC/

处可视化整个事物

HTML5可以通过<div>使用适当的类重做为HTML4，例如使用<div class="section">和<div class="hgroup">

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

4 个答案: