Jak zawinąć linie w bloku śródliniowym za pomocą CSS?

Question

Mam prostą strukturę 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 i text mieć display: inline-block.

To wygląda dobrze, gdy text jest dość mały:

Jednakże, jak tekst rośnie, inline-block elementy rozciągają się i ostatecznie spaść na linii:

To jest brzydki, i chciałbym tego uniknąć.
Co chcę osiągnąć, a nie jest to:

Gdy tekst jest zbyt duża, aby zmieścić wewnątrz elementu, chcę być owinięty liniami.
Próbowałem ustawić float: left na elementach, ale nie mogłem go uruchomić.

Jaki jest właściwy sposób na wykonanie tego przy pomocy HTML i CSS (bez tabel)?

Answer 1

Dokładny wynik, który chcesz osiągnąć, można uzyskać, jeśli używasz pływaków zamiast display: inline-block.

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

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

Answer 2

Musisz podać kilka max-width z procentem:

<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

myślę, że trzeba ustawić max-width z innego trybu wyświetlania.

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

See the new result here

BTW, jeśli używasz inline-block, część właścicieli nie będzie pozostać na szczycie.

Zmodyfikowałem kod, aby spełnić Twoje wymagania. :)

FYI, li {overflow:hidden;} to sposób na zrobienie kontenera, w który będą mogły wchodzić jego unoszone dzieci.

Answer 4

Jest to bardzo miłe rozwiązanie schematu flexbox jeśli masz wsparcie Przeglądarka:

/* 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; 
 
}

<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>