css - 使用盒子模型在其父 div 中包含元素

Question

使用以下 HTML 和 CSS3 规则，我试图确保遵守以下标准:

I have all of the criteria working except for item 1 where the children are exceeding their parent's width. Question: How to keep children within their parent?

1. li 元素不能超过其父宽度，即 400px
2. img、标签和货币内容必须在其范围内垂直居中
3. 货币不应换行，应始终完整显示
4. 货币应始终尽可能靠近标签跨度。
5. 标签文本应限制在 2 行，超过 2 行的地方显示省略号。

注意:只需要在基于 Chrome 和 Safari webkit 的浏览器中工作。

它应该是这样的:

但是，目前看起来是这样的:

有什么想法吗？

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

如果价格没有变宽，以下方法将起作用:

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

我只是将 margin-right 转换为像素，这样我就知道标签以外的内容占用的空间，然后为剩余部分添加一个最大宽度:

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

如果价格或图像的宽度可变，您将需要 js 读取它们的宽度，从 400px 中删除并将该值添加到 max-width。

这是一个使用 JavaScript 动态设置最大宽度的示例: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;
}