Utilizzando il modello di dialogo per contenere oggetti di sua div genitore

Question

utilizzando le seguenti regole HTML e CSS3, sto cercando di fare in modo che i seguenti criteri siano rispettati:

ho tutti i criteri di lavoro ad eccezione per l'articolo 1 in cui i bambini superano la larghezza dei genitori. Domanda: come mantenere i bambini all'interno dei loro genitori?

1. elementi Li non possono superare i loro genitori larghezza cioè 400px
2. img, etichetta, e il contenuto di valuta devono essere centrati verticalmente all'interno del loro arco
3. moneta non dovrebbe avvolgere e devono essere sempre visualizzati in pieno
La valuta
4. deve sempre essere visualizzata il più vicino possibile allo span dell'etichetta .
5. il testo dell'etichetta deve essere bloccato su 2 righe con i puntini di sospensione visualizzati dove supera le 2 righe.

Nota: deve funzionare solo nei browser basati su browser Chrome e Safari.

Esso dovrebbe essere simile:

Tuttavia, sembra che questo al momento:

Tutte le idee?

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

di seguito funzionerà, fornendo il prezzo non ottiene più ampia:

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

ho semplicemente convertito il margine a destra per pixel in modo che sapevo lo spazio occupato dal contenuto altra rispetto all'etichetta, quindi aggiunto una larghezza massima per il resto:

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

se il prezzo o l'immagine sono di larghezza variabile, è necessario js per leggere le loro larghezze, rimuovere da 400px e aggiungere tale valore alla larghezza massima.

Ecco un esempio utilizzando JavaScript per impostare dinamicamente il max-width: http://jsfiddle.net/WDjZ3/7/

Non ho controllato tutte le dimensioni, in modo che dovrebbe essere aggiunto per renderlo pienamente preciso, altrimenti i margini renderanno il prezzo no più lungo in forma.

Io fondamentalmente controllato la larghezza degli altri elementi:

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

Ho quindi rimosso questa larghezza da 400px, e impostare la 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

Ho risolto questo per funzionare senza JavaScript . Tuttavia, funziona solo con browser più moderni, tra cui Chrome e Opera. Non funzionerà in Safari. Funzionerà in Firefox una volta aggiornato alle ultime specifiche. Probabilmente riuscirò a farlo funzionare in IE10, ma devo approfondirlo di più. I puntini di sospensione funzionano solo in Chrome/Safari in quanto è specifico del fornitore.

La demo è a http://jsfiddle.net/uLm92/1/

Prima di tutto vogliamo fare la Li come contenitore FlexBox e impostarlo a 400px, quindi gli elementi flex cercheranno di adattare quelle dimensioni (ne riparleremo più avanti):

Ora gli elementi figlio sono elementi flessibili, la chiave per ottenere l'etichetta per adattarsi è impostare l'immagine e il prezzo di non flettere. Per il prezzo, sappiamo che vuole essere sempre 40xp ampia, così mi sono messo il seguente:

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

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

Questo dice che il preferito con id 40px e mai renderlo più piccolo.

Poi vogliamo raccontare anche il prezzo di non restringersi, e per centrare anche la casella anonima (il contenuto):

.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; 
} 

Infine, vogliamo centrare anche il testo dell'etichetta. Come hai bisogno di un ellisso, ho usato la vecchia sintassi Flexbox per WebKit. Senza usare vecchio FlexBox, la proprietà line-clamp non funziona:

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

}

Come gli altri due elementi non potrà mai ridursi, l'elemento .label è l'unico che può, quindi si riduce di dimensioni se non c'è spazio lasciato.