私は次の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
皆さんありがとう !