垂直渲染元素，当它“溢出”容器时浮动到左边

Question

我有this图片

中的设计

基本上，我有一个固定高度的容器（fx，300px）。 我需要垂直渲染列表的宽度：33％，如果列表太长，溢出的列表应该浮动到左边。

.container {
  width: 940px;
  height: 300px;
  margin: auto;
  background: #dedede;
  margin-top: 30px;
}
.item {
  width: 31.2%;
  background-color: #B49AD9;
  margin-bottom: 10px;
  padding: 10px;
}
.item > div {
  display: inline-block;
  vertical-align: top;
}
.item ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.alpha {
  font-weight: bold;
  font-size: 2em;
}

<h2>The C container should float to left and place next to A</h2>
<div class="container">
  <div class="item">
    <div class="alpha">A</div>
    <div class="words">
      <ul>
        <li>Alll</li>
        <li>Aoooo</li>
        <li>Auuuuu</li>
      </ul>
    </div>
  </div>
  <div class="item">
    <div class="alpha">B</div>
    <div class="words">
      <ul>
        <li>Blll</li>
        <li>Boooo</li>
        <li>Buuu</li>
        <li>Baaaaa</li>
        <li>Boppoe</li>
        <li>Buuuuu</li>

      </ul>
    </div>
  </div>
  <div class="item">
    <div class="alpha">C</div>
    <div class="words">
      <ul>
        <li>Clll</li>
        <li>Coooo</li>
        <li>Cuuu</li>
        <li>Coppoe</li>
        <li>Cuuuuu</li>

      </ul>
    </div>
  </div>
</div>

带有C的紫色框应移到A

旁边

我怎样才能做到这一点？欢迎css和js：）

PS：它至少需要支持IE9 ......

Answer 1

您可以使用flexbox：

.container {
  display: flex;          /* Magic begins*/
  flex-flow: column wrap; /* Multiline column layout */
}

＆＃13;

＆＃13;

.container {
  width: 100%;
  max-width: 940px;
  height: 300px;
  margin: auto;
  background: #dedede;
  margin-top: 30px;
  display: flex;          /* Magic begins*/
  flex-flow: column wrap; /* Multiline column layout */
}
.item {
  width: 31.2%;
  background-color: #B49AD9;
  margin-bottom: 10px;
  padding: 10px;
}
.item > div {
  display: inline-block;
  vertical-align: top;
}
.item ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.alpha {
  font-weight: bold;
  font-size: 2em;
}

＆＃13;

<h2>The C container should float to left and place next to A</h2>
<div class="container">
  <div class="item">
    <div class="alpha">A</div>
    <div class="words">
      <ul>
        <li>Alll</li>
        <li>Aoooo</li>
        <li>Auuuuu</li>
      </ul>
    </div>
  </div>
  <div class="item">
    <div class="alpha">B</div>
    <div class="words">
      <ul>
        <li>Blll</li>
        <li>Boooo</li>
        <li>Buuu</li>
        <li>Baaaaa</li>
        <li>Boppoe</li>
        <li>Buuuuu</li>
      </ul>
    </div>
  </div>
  <div class="item">
    <div class="alpha">C</div>
    <div class="words">
      <ul>
        <li>Clll</li>
        <li>Coooo</li>
        <li>Cuuu</li>
        <li>Coppoe</li>
        <li>Cuuuuu</li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;