当第二个div可能有loooong字符串时，堆叠两个div LTR水平

Question

用例似乎微不足道，但我不能让它按需工作。我需要将第二个div的所有内容放在第一个div的右侧。当字符串足够长时，它包含到第二行，包含我想象的CSS属性的所有组合：

注意：

• 我不知道这些div内容的高度，因此无法为它们以及父/容器设置固定高度
• 我可以设置固定到第1个div并且实际上希望它占据整个左侧部分（从上到下）
• 实际上，我想要的是具有两个单元格的“普通旧”水平表，但没有＆lt;表＆gt;标签。

以下是我尝试的jsfiddle和示例文字。浮点数的典型解决方案效果很好，而第二个div不包含长字符串：

HTML

<div class="container1 clearfix"><div>
        <p>first 1</p>
        <p>first 2</p>
    </div><div>
        <p>second 1</p>
        <p>second 2</p>
        <p>second second second second second second second second second second second second </p>
        <p>second 4</p>
    </div>
</div>

CSS

.clearfix:before,
.clearfix:after { display: table; content: " "; }
.clearfix:after { clear: both; }

div { outline: 1px solid red; } 
div > div:nth-child(1) { outline: 1px solid green; } 
div > div:nth-child(2) { outline: 1px solid orange; } 


.container1 { overflow: hidden; }
.container1 > div { float: left; height: 100%; /* display: inline-block; */}
.container1 > div:nth-child(1) { width: 80px; } 
.container1 > div:nth-child(2) { } 

Answer 1

如果我理解你正在尝试做什么，这可能是一个解决方案：

CSS：

.first-div {
  float: left; 
  width: 80px;
}

.second-div {
  margin-left: 81px;
  padding: 1em;
}

第二个div上的margin-left说明了第一个div的宽度加上边框，允许第二个div在屏幕调整大小时调整其内容以适应可用空间。

HTML：

<div class="container1">
  <div class="first-div">
    <p>first 1</p>
    <p>first 2</p>
  </div>
  <div class="second-div">
    <p>second 1</p>
    <p>second 2</p>
    <p>second second second second second second second second second second second second</p>
    <p>second 4</p>
  </div>
</div>

Answer 2

一种选择是对这些div使用display:table-cell规则：

.container1 > div {
    height: 100%;
    display: table-cell;
}

<强> jsFiddle example