如何用CSS包装内联块中的行？

Question

我有一个简单的HTML结构（ jsfiddle ）：

<li>
    <div class="buttons">
        <a href="done"><img src="done.png"></a>
    </div>
    <div class="owners">
        Даня Абрамов и Саша Васильев
    </div>
    <div class="text">
        трали-вали трали-вали трали-вали трали-вали
    </div>
</li>

buttons，owners和text有display: inline-block。

当text相当小时，这看起来很好：

但是，随着文本的增长，inline-block元素会延伸并最终落在该行上：

这很难看，我想避免这种情况 我想要实现的是：

当文字太大而无法放入元素内部时，我希望它被线条包裹 我尝试在元素上设置float: left，但无法使其正常工作。

使用HTML和CSS（没有表格）执行此操作的正确方法是什么？

Answer 1

如果使用浮点数代替display: inline-block，则可以获得所需的确切结果。

请参阅： http://jsfiddle.net/thirtydot/CatuS/

li {
    overflow: hidden;
}
.buttons, .owners {
    float: left;
}
.text {
    overflow: hidden;
    padding-left: 4px;
}

Answer 2

您必须指定一些max-width百分比：

<li>
    <div class="buttons" style="max-width:10%;">
        <a href="done"><img src="done.png"></a>
    </div>
    <div class="owners" style="max-width:30%;">
        Даня Абрамов и Саша Васильев
    </div>
    <div class="text" style="max-width:60%;">
        трали-вали трали-вали трали-вали трали-вали
    </div>
</li>
<!-- 10+30+60 = 100% -->

Answer 3

我认为您需要使用不同的显示模式设置最大宽度。

li {overflow:hidden;}
li div { float:left; }
.button{ max-width: 10%;}
.owners{ max-width: 20%;}
.text{ max-width: 70%;}

See the new result here

顺便说一句，如果你使用内联块，那么所有者部分将不会保持最佳状态。

我修改了代码以满足您的要求。 ：）

仅供参考，li {overflow:hidden;}是一种使容器能够包含浮动儿童的方法。

Answer 4

如果您有浏览器支持，有一个非常好的flexbox解决方案：

＆＃13;

＆＃13;

/* flexbox additions */

ul li {
  display: flex;
}

.buttons {
  flex-shrink: 0;
}

.owners {
  flex-shrink: 0;
  margin-right: 6px;
}

/* original CSS (inline-block is technically no longer necessary) */

.buttons {
  display: inline-block;
}

.owners {
  display: inline-block;
}

.text {
  display: inline-block;
}

/* the rest is visual styling */

ul li {
  line-height: 1.5em;
  padding: 12px 8px 12px 8px;
  margin-bottom: 12px;
  margin-top: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-size: 15px;
  background-color: #DBEAFF;
  min-height: 23px;
}

.buttons {
  min-width: 13px;
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: -3px;
}

.buttons a {
  padding: 13px 9px 5px 9px;
}

＆＃13;

<ul>
  <li>
    <div class="buttons">
      <a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
    </div>
    <div class="owners">
      <a>Даня Абрамов</a>
    </div>
    <div class="text">short text
    </div>
  </li>
  <li>
    <div class="buttons">
      <a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
    </div>
    <div class="owners">
      <a>Даня Абрамов</a>
    </div>
    <div class="text">longer text longer text longer text longer text longer text longer text longer text longer text longer text
    </div>
  </li>
  <li>
    <div class="buttons">
      <a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
    </div>
    <div class="owners">
      <a>Даня Абрамов</a> и <a>Саша Васильев</a>
    </div>
    <div class="text">
      longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text
      longer text longer text longer text longer text longer text longer text
    </div>
  </li>
  <li>
    <div class="buttons">
      <a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
    </div>
    <div class="owners">
      <a>Даня Абрамов</a> и <a>Саша Васильев</a>
    </div>
    <div class="text">
      трали-вали трали-вали трали-вали трали-вали
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;