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>

在第二种情况下，有没有办法将 div 保留在第一个之外，而不是移动到第一个下方。请注意，我不能为我的 div 使用固定宽度作为将出现在它们中的未知文本的长度。然后我只知道第一个 div 中的文本总是很短，而第二个 div 中的文本可能很长。

这是我想要的基本图：

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

谢谢大家！

4

2 回答 2

2

行。我终于设法使用只有一行和两个单元格的表格来完成我需要的工作。桌子占据整个宽度。第一个单元格的文本是 nowrap ，因此它占用了它需要的所有空间。第二个单元格上的文本占据了剩余空间并根据需要进行换行并保持良好对齐。

于 2012-08-12T20:55:02.560 回答
1

元素根据其内容显示为inline-block换行并尝试保持内联。您正在使用的代码正是这样做的。当第二个 div 的内容溢出时，它会增加大小以适应。

对此的正确解决方案是添加width到元素中。

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

演示

于 2012-08-12T06:51:07.817 回答