3

我的代码如下：

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

我想让元素的宽度为or#text-wrapper的较大宽度，但似乎它的宽度总是与元素相同。有什么方法可以实现我的目标吗？#title#subtitle element#latest-text

4

4 回答 4

3

是的，你可以这么做。将其中一个 span 设置为 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>

CSS：

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

span#title {
  display: block;
}

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

于 2013-02-01T21:37:48.633 回答
0

您可以使用 JavaScript 设置“text-wrapper”的宽度。首先对“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>
于 2013-02-01T21:27:49.563 回答
0

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

如何设置 DIV 的宽度以跨越其中的文本（所以不固定）

于 2013-02-01T21:28:38.040 回答
0

如果将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 重做为 HTML4 <div>，例如使用<div class="section">和<div class="hgroup">

于 2013-02-01T22:00:41.187 回答