5

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

我的所有标准都有效,除了第 1 项,孩子们超出了他们父母的宽度。问题:如何让孩子留在父母身边?

  1. li 项目不能超过其父宽度,即 400px
  2. img、label 和 currency 内容必须在它们的范围内垂直居中
  3. 货币不应换行,应始终完整显示
  4. 货币应始终尽可能靠近标签跨度显示。
  5. 标签文本应固定在 2 行,并在超过 2 行的地方显示省略号。

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

它应该看起来像:

在此处输入图像描述

但是,它现在看起来像这样:

在此处输入图像描述

有任何想法吗?

************************ 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...);
}
4

2 回答 2

0

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

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

我只是将 margin-right 转换为像素,所以我知道标签以外的内容占用的空间,然后为其余部分添加了 max-width:

.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;
}
于 2013-05-17T17:56:28.767 回答
0

我已经解决了这个问题,无需 JavaScript。但是,它仅适用于更现代的浏览器,包括 Chrome 和 Opera。它在 Safari 中不起作用。一旦更新到最新规范,它将在 Firefox 中运行。我可能可以让它在 IE10 中工作,但我必须进一步研究。省略号仅适用于 Chrome/Safari,因为它是特定于供应商的。

该演示位于http://jsfiddle.net/uLm92/1/

首先,我们要将 li 设为 flexbox 容器并将其设置为 400px,因此 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;
}

最后,我们还希望将标签文本居中。由于您需要省略号技巧,因此我使用了 WebKit 的旧 Flexbox 语法。如果不使用旧的 flexbox,line-clamp 属性不起作用:

。标签 {

/* 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 元素是唯一可以缩小的元素,因此如果没有剩余空间,它会缩小大小。

于 2013-05-17T23:25:19.110 回答