Question

我有以下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使用固定宽度作为将在未知中显示的文本的长度。然后我只知道第一个div中的文本总是很短，第二个div中的文本可能很长。

这是我想要的基本图表：

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

全部谢谢！

Answer 1

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

Answer 2

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

正确的解决方法是将width添加到元素中。

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

Demo

即使第二个div溢出，如何并排保留两个内联块div

2 个答案: