Làm cách nào để bọc các dòng trong khối nội tuyến bằng CSS?

Question

Tôi có một cấu trúc HTML đơn giản (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 và text có display: inline-block.

này có vẻ tốt đẹp khi text là khá nhỏ:

Tuy nhiên, vì văn bản phát triển, inline-block yếu tố mở rộng và cuối cùng rơi trên dòng:

Đây là xấu xí, và tôi muốn tránh điều đó.
Những gì tôi muốn đạt được thay vì đây là:

Khi văn bản là quá lớn để phù hợp với bên trong phần tử, tôi muốn nó được bao bọc bởi dòng.
Tôi đã thử đặt float: left trên các thành phần, nhưng không thể làm cho nó hoạt động.

Cách thích hợp để thực hiện việc này với HTML và CSS (không có bảng) là gì?

Answer 1

Kết quả chính xác mà bạn mong muốn có thể đạt được nếu bạn sử dụng phao thay vì display: inline-block.

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

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

Answer 2

Bạn phải chỉ định một số max-width với tỷ lệ:

<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

Tôi nghĩ rằng bạn cần phải thiết lập max-width với chế độ hiển thị khác nhau.

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, nếu bạn sử dụng inline-block, phần chủ sở hữu sẽ không ở lại trên đầu trang.

Tôi đã sửa đổi mã để phù hợp với yêu cầu của bạn. :)

FYI, li {overflow:hidden;} là cách để tạo vùng chứa để bao gồm các trẻ em lưu hành.

Answer 4

Có một giải pháp flexbox rất tốt đẹp nếu bạn có sự hỗ trợ trình duyệt:

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