4

私は次のhtmlとcssコードを持っています:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
  background-color:#d0e4fe;
}

div.container
{
  width: 600px;
  border: solid 1px black;
}

div.divLeft
{
  display:inline-block;
  border: solid 1px red;
  color: red;
}

div.divRight
{
  display:inline-block;
  border: solid 1px blue;
  color: blue;
}

</style>
</head>

<body>
  <div class="container">
    <div class="divLeft">
      <p>1 - Some short text</p>
    </div>
    <div class="divRight">
      <p>Some not too long text with the div besides the first one.</p>
    </div>
  </div>
  <div class="container">
    <div class="divLeft">
      <p>2 - Some short text</p>
    </div>
    <div class="divRight">
      <p>Some very long text that will eventually wrap because it is so long and when it wraps is when the trouble starts because the div moves down instead of staying besides the first one.</p>
    </div>
  </div>
</body>
</html>

2番目のケースでは、最初のdivの下に移動するのではなく、最初のdivのほかにdivを保持する方法があります。divに表示されるテキストの長さが不明であるため、divに固定幅を使用できないことに注意してください。次に、私が知っているのは、最初のdivのテキストは常に短く、2番目のdivのテキストは長くなる可能性があるということだけです。

これが私が欲しいものの基本的な図です:

First div text  Second div text stays beside the first one
                and wraps around still being aligned like this

皆さんありがとう !

4

2 に答える 2

2

Ok。最終的に、行が 1 つ、セルが 2 つしかないテーブルを使用して、必要なことを正確に行うことができました。テーブルは幅全体を占めます。最初のセルのテキストは nowrap なので、必要なすべてのスペースを占有します。2 番目のセルのテキストは残りのスペースを占め、必要に応じて折り返され、適切に配置されます。

于 2012-08-12T20:55:02.560 に答える
1

内容に応じて折り返しとして表示される要素inline-blockは、インラインのままにしようとします。使用しているコードはまさにこれを行います。2番目のdivのコンテンツがオーバーフローすると、それに対応するためにサイズが大きくなります。

widthこれに対する適切な解決策は、要素に追加することです。

.divLeft { width: 150px; vertical-align: top; }
.divRight { width: 400px; vertical-align: top; }

デモ

于 2012-08-12T06:51:07.817 に答える