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

はい、できます。スパンの1つをブロックに設定し、親pタグをインラインブロックに設定します。2番目のスパンをインラインにします。

<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

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/で全体を視覚化するのに役立ちます。

<div>HTML5 は、適切なクラスで使用することにより<div class="section">、HTML4 としてやり直すことができます。<div class="hgroup">

于 2013-02-01T22:00:41.187 に答える
0

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>
于 2013-02-01T21:27:49.563 に答える
0

ユーザーが div の幅をその中のスパンで設定しようとしていた、非常によく似た質問がここで回答されました。これが役立つかどうかを確認してください。

DIV の幅を内部のテキストにまたがるように設定する方法 (修正されていません)

于 2013-02-01T21:28:38.040 に答える