html - 如何始终并排放置两个不同高度的 div，文本直接出现在第一个 div 的下方并且从不与第二个 div 重叠？

Question

这有点繁琐，但我会尽力解释一下。我正在尝试使用 CSS 的是:

1. 页面顶部的两个 div(“A”和“B”)，并排组合，固定宽度为 400 像素(如果窗口太窄看不到两者，则应显示滚动条，我不希望一个 div 跳到另一个下面)
2. 不过，这两个 div 的高度可以不同 - 有时 div A 会更高，有时 div B 会更高。
3. 我想在 div A 的正下方显示一些长文本。如果 div B 高于 div A，那么文本应该围绕 div B 排列。
4. 文本的显示宽度不应超过 400 像素，但如果窗口较窄，则应根据需要尽可能窄地显示。文本不应比视口(viewport)宽。

总而言之，无论窗口宽度有多窄，我都希望顶部的两个并排 div 以相同的方式显示，但 div A 下面的文本响应窗口宽度(也不是重叠 div B，如果 div B 比 div A 下降得更远)。

这里有一些代码不是正确的方法，但部分显示了我的目的:

.all {
  max-width:400px;
}
.header div{
    display:inline-block;
    vertical-align:top;
}
.header{
    white-space: nowrap;
    padding: 0px;
    height: 36px;
}
.A{
    background-color:red;
    width: 195px;
    margin-right: 5px;
}


.B{
    width: 195px;
    margin-left: 5px;
    background-color:blue;
}

<div class="all">
<div class="header"><div class="A">Text1</div><div class="B">Text2<br/>Text2<br/>Text2<br/>Text2<br/></div></div>
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>

在 JSFiddle 上也是如此: https://jsfiddle.net/ur60tdxy/1/

这里不起作用的是长文本与 div B(蓝色的)重叠，而且它不允许 div A 具有不同的高度(它只显示顶部下方 36px 而不是紧挨着 div A，不管它的高度)。

如有任何帮助，我们将不胜感激。

编辑:这是第二个版本，除了我希望两个 div 在窗口太窄时保持并排:

.all {
  max-width:400px;
}
.A{
    background-color:red;
    width: 190px;
    margin: 5px;
  float: right;
}


.B{
    width: 190px;
    margin: 5px;
    background-color:blue;
  float: right;
}

<div class="all">
<div class="B" style="float: right;">Text2<br/>Text2<br/>Text2<br/>Text2<br/></div>
<div class="A">Text1</div>
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>

https://jsfiddle.net/ur60tdxy/2/

Answer 1

使用 width:max-content; 来避免换行。

调整屏幕大小以查看结果:

.all {
  margin:5px;
}

.header {
  width:max-content;
}

.A {
  background-color: red;
  width: 195px;
  margin-right: 5px;
  float:left;
}

.B {
  width: 195px;
  margin-left: 5px;
  background-color: blue;
  float: right;
}

.content {
  clear:left;
  max-width: 400px;
}

<div class="all">

  <div class="header">

    <div class="A">Text1</div>

    <div class="B">Text2<br/>Text2<br/>Text2<br/>Text2<br/></div>
  </div>
 <div class="content">
  This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
  is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
 </div>
</div>

<div class="all">

  <div class="header">

    <div class="A">Text1<br/>Text2<br/>Text2<br/>Text2<br/></div>

    <div class="B">Text2</div>
  </div>
<div class="content">
  This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
  is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
</div>