html - 我怎样才能让两个不同高度的 div 始终并排，文本直接出现在第一个 div 的下方并且从不与第二个 div 重叠？

Question

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

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

总而言之，我希望顶部的两个并排 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/

标签： htmlcss

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>