如何使用CSS在一个inline-block中换行？

问题描述

我有一个简单的HTML结构（

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

I have a simple HTML structure (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 and text have display: inline-block.

This looks fine when text is fairly small:

However, as the text grows, inline-block elements extend and eventually fall over the line:

This is ugly, and I would like to avoid that.
What I want to achieve instead is this:

When the text is too large to fit inside the element, I want it to be wrapped by lines.
I tried setting float: left on the elements, but couldn't get it working.

What's the proper way to do this with HTML and CSS (no tables)?

解决方案

The exact result you desire can be achieved if you use floats instead of display: inline-block.

See: http://jsfiddle.net/thirtydot/CatuS/

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

这篇关于如何使用CSS在一个inline-block中换行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！