Geek asks and answers

Using the box model to place elements in the parent div

Using the following HTML and CSS3 rules, I try to make sure that the following criteria are met:

I have all the criteria, with the exception of paragraph 1, where the children exceed their parental width. Question: How to keep children within their parent?

  • Items
  • li cannot exceed their parent width, i.e. 400px
  • img, label and currency content should be centered vertically within their range
  • the currency should not end and should always be displayed in full. Currency
  • should always be displayed as close to the shortcut as possible.
  • the text of the label should be clamped in 2 lines with the display of an ellipse, where it exceeds 2 lines.

Note. You need to work only in Chrome and Safari browsers on web pages.

It should look like this:

enter image description here

:

enter image description here

?

********************* JS Fiddle *** *********************

<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...);
}
+5
2

, :

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

margin-right , , , , :

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

, js , 400 max-width.

JavaScript max-width: http://jsfiddle.net/WDjZ3/7/

, , , .

:

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

400px maxWidth:

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

Ive JavaScript. , Chrome Opera. Safari. Firefox . , , IE10, . Chrome/Safari, .

http://jsfiddle.net/uLm92/1/

, li flexbox 400 , flex ( ):

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

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

, - , . , 40xp , :

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

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

, id 40px .

, , ():

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

, . , flexbox WebKit. flexbox line-clamp :

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

}

, .label , , , .

0

More articles:


All Articles