Sử dụng mô hình hộp để chứa các mục bên trong div mẹ

Question

Sử dụng các quy tắc HTML và CSS3 sau, tôi đang cố gắng để đảm bảo rằng các tiêu chuẩn sau được tôn trọng:

tôi có tất cả các tiêu chí làm việc trừ đối với khoản 1, trong đó số trẻ em trên vượt quá chiều rộng của bố mẹ. Câu hỏi: Làm thế nào để giữ trẻ em trong cha mẹ?

1. mục li không thể vượt quá mẹ chiều rộng tức là họ 400px
2. img, nhãn và nội dung tệ phải được tập trung theo chiều dọc trong khoảng thời gian của họ
3. tệ không nên quấn và phải luôn luôn được hiển thị đầy đủ
4. đơn vị tiền tệ phải luôn được hiển thị càng gần càng tốt với khoảng nhãn .
5. văn bản nhãn phải được kẹp ở 2 dòng có dấu ba chấm được hiển thị khi nó vượt quá 2 dòng.

Lưu ý: Chỉ cần làm việc trong trình duyệt dựa trên web Chrome và Safari.

Nó sẽ giống như thế:

Tuy nhiên, có vẻ như thế này vào lúc này:

Bất kỳ ý tưởng?

********************* JS Fiddle example ************************

<ul> 
    <li> 
     <span class="img"></span> 
     <span class="label">Acclaim</span> 
     <span class="currency">(USD 50)</span> 
    </li> 

    <li> 
     <span class="img"></span> 
     <span class="label">Acclaim 1 11 111 1111 11111</span> 
     <span class="currency">(USD 50)</span> 
    </li> 

    <li> 
     <span class="img"></span> 
     <span class="label">Acclaim 1 11 111 1111 11111 2 22222 2222 22222 3 33 333 3333 33333 4 44 444 4444 44444 5 55 555 5555 55555 6 66 666 6666 66666</span> 
     <span class="currency">(USD 50)</span> 
    </li> 
</ul> 


ul { 
    width: 400px; 

    background-color: yellow; 
    padding: 0; 
    margin: 0; 
} 

li { 
    display: -webkit-box; 

    padding-right: 50px; 
} 

.label { 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-box-pack: center; 

    -webkit-line-clamp: 2; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: normal; 
    word-wrap: break-word; 
    line-height: 1.3em; 
    margin-right: 0.2em;  

    background-color: pink;  
} 

.currency { 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-box-pack: center; 

    white-space: nowrap; 

    background-color: lightgreen;  
} 

.img { 
    display: block; 
    width: 40px; 
    height: 40px; 
    margin-right: 0.1em; 

    background-image:url('data:image/png;base64,iVBOR...); 
} 

Answer 1

sau đây sẽ làm việc, cung cấp giá cả không được rộng hơn:

http://jsfiddle.net/WDjZ3/4/

tôi chỉ đơn giản là chuyển đổi các margin-right để pixel vì vậy tôi biết không gian đưa lên bởi các nội dung khác so với nhãn, sau đó thêm chiều rộng tối đa cho phần còn lại:

.label { 
    margin-right: 3px; 
    max-width: 294px; 
} 

nếu giá hoặc hình ảnh có chiều rộng thay đổi, bạn sẽ cần js để đọc chiều rộng của chúng, loại bỏ từ 400px và thêm giá trị đó vào chiều rộng tối đa.

Dưới đây là một ví dụ sử dụng JavaScript để tự động thiết lập max-width: http://jsfiddle.net/WDjZ3/7/

tôi đã không kiểm tra tất cả các kích thước, do đó nên được thêm vào để làm cho nó hoàn toàn chính xác, nếu không thì lợi nhuận sẽ làm cho giá không còn phù hợp.

tôi về cơ bản đã kiểm tra độ rộng của các yếu tố khác:

function getWidth(el) { 
    return parseInt(window.getComputedStyle(el,null).getPropertyValue("width")); 
} 

sau đó tôi lấy chiều rộng này từ 400px, và thiết lập các maxWidth:

for (var i=0; i<imgs.length; i++) { 
    var width = 400 - (getWidth(imgs[i]) + getWidth(currencies[i])) + "px"; 
    labels[i].style.maxWidth = width; 
} 

Answer 2

Tôi đã giải quyết này để làm việc mà không cần JavaScript . Tuy nhiên, nó chỉ hoạt động trong các trình duyệt hiện đại hơn, bao gồm cả Chrome và Opera. Nó sẽ không hoạt động trong Safari. Nó sẽ hoạt động trong Firefox khi nó cập nhật thông số mới nhất. Tôi có lẽ có thể làm cho nó hoạt động trong IE10, nhưng tôi phải nhìn vào nó nhiều hơn. Dấu ba chấm chỉ hoạt động trong Chrome/Safari vì nó là nhà cung cấp cụ thể.

Bản demo là http://jsfiddle.net/uLm92/1/

Trước hết chúng tôi muốn làm cho li như một container flexbox và đặt nó là 400px, vì vậy các mục flex sẽ cố gắng để phù hợp với kích thước (thêm về điều này sau):

li { 
    /* make all items inside li as flex items */ 
    display: -webkit-flex; 
    display: flex; 

    height: 40px; 
    max-width: 400px; 
} 

Bây giờ các mục con là các mặt hàng flex, chìa khóa để nhãn phù hợp là đặt hình ảnh và giá thành không được uốn cong. Về giá cả, chúng ta đều biết nó muốn luôn rộng 40xp, vì vậy tôi thiết lập như sau:

.img { 
    width: 40px; 
    height: 40px; 

    -webkit-flex-basis: 40px; 
    flex-basis: 40px; 
    -webkit-flex-shrink: 0; 
    flex-shrink: 0; 
} 

này nói rằng ưu tiên với id 40px và không bao giờ làm cho nó nhỏ hơn.

Sau đó, chúng tôi muốn cũng nói giá để không bao giờ thu nhỏ, và cũng để tập trung vào hộp vô danh (nội dung):

.currency { 

    /* make anonymous box vertically centred */ 
    display: -webkit-flex; 
    display: flex; 

    -webkit-align-items: center; 
    align-items: center; 

    /* make sure it never shrinks */ 
    -webkit-flex-shrink: 0; 
    flex-shrink: 0; 
} 

Cuối cùng, chúng tôi muốn cũng phải tập trung các văn bản nhãn. Khi bạn cần hack hình elip, tôi đã sử dụng cú pháp Flexbox cũ cho WebKit. Mà không sử dụng flexbox cũ, tài sản line-kẹp không hoạt động:

.label {

/* need to use old flexbox for line-clamp to work 
    it is a *horrible hack* */ 
display: -webkit-box; 
display: flex; 

-webkit-line-clamp: 2; 
-webkit-box-orient: vertical; 
overflow : hidden; 
text-overflow: ellipsis; 

-webkit-box-pack: center; 
align-items: center; 

}

Khi hai hạng mục khác sẽ không bao giờ thu nhỏ, yếu tố .label là người duy nhất có thể, do đó, nó giảm kích thước nếu không có không gian còn lại.