javascript - 两个 div 彼此相邻，内容从第二个 div 换行

Question

我正在寻找一种解决方案，将两个 div 一个接一个地放置在 <td> 中.
第一个 div 元素是一个固定大小的图像。
第二个 div 元素是一个未知长度的链接(文本)。

我想在调整浏览器窗口大小时包裹第二个 div 的内容，但包裹的内容不应出现在图像 (div-1) 下方，也不应流出行。

预期行为应如下所示:

当前行为如下所示:

有一个类似的question ，但不希望在那里换行，我想在我的第二个 div 中换行。

谢谢你的帮助

我目前的代码是:

<td class="infoElement" data-ng-if="::!item.empty">
 <div style="overflow: auto">
    <div style="display: inline-block" class="ListIcon" data-context-link="item"></div>
    <div style="overflow: hidden; display: inline-block;">
        <a data-ng-bind="::item.displayName"></a>
    </div>
 </div>
</td>

Answer 1

实现这一点的最简单方法是使用 Flexbox。

https://jsfiddle.net/Lnocagr2/2/

HTML:

<div class="container">
  <section>
    <div class="smallDiv">
      smalldiv
    </div>
    <div class="largeDiv">
      <ul>
        <li>bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla</li>
        <li>foo</li>
        <li>bar</li>
      </ul>
    </div>
  </section>
  <section>
    <div class="smallDiv">
      smalldiv
    </div>
    <div class="largeDiv">
      <ul>
        <li>bla</li>
        <li>foo</li>
        <li>bar</li>
      </ul>
    </div>
  </section>
  <section>
    <div class="smallDiv">
      smalldiv
    </div>
    <div class="largeDiv">
      <ul>
        <li>bla</li>
        <li>foo</li>
        <li>bar</li>
      </ul>
    </div>
  </section>
</div>

CSS:

.container{
  width:100%;
}
section{
  width:100%;
  display:flex;
  flex-direction:row;
}
.smallDiv{
  width:100px;
}
.largeDiv{
  flex:1;
}