1

这是我的问题的 jsfiddle 链接

HTML

<div  class="Right green">
    <h2>
        <div class="number colorV"> 8.123456 </div>
        <div id="text"> huh-fjiuetie</div>
    </h2>
    <div  class="Right-after green-after"></div>
</div>

条件是：

  1. 标签内的两个div'h2必须在同一行。
  2. 具有类 `.number 的 div。必须是灵活的，它的内容是可变的。
  3. div中的.text内容根据number div中的内容进行裁剪（宽度不能固定，因为number div中的内容是动态生成的）
  4. 背景颜色也不是固定的（因此我们不能将背景颜色固定到数字 div 以便按要求执行）

任何建议将不胜感激。

4

1 回答 1

1

根据较早的相关问题，您可以尝试以下操作。

如下修改您的 HTML：

<div class="Right green">
    <div class="table-wrap">
        <div class="text-cell">
            <div class="inner">huh-fjiuetie</div>
        </div>
        <div class="number-cell colorV">8.123456</div>
    </div>
    <div class="Right-after green-after"></div>
</div>

并应用以下 CSS：

body {margin: 0;} /* Note: learn about reset style sheets... */

/* The following takes care of the shadow/coloring/arrow styling */
.Right {
    position: relative;
    width: 80%;
    margin-right: 50px;
    margin-top: 4%;
}
.Right-after {
    content:"";
    position:absolute;
    top: 0;
    width: 0;
    border-style: solid;
    border-width: 3.3em 0 3.3em 3.3em;
    right:-3.2em;
}
.colorV {
    color:#dbdcde;
}
.green {
    background: linear-gradient(to left, #1d9755, #005b26, #002000);
}
.green-after {
    border-color: transparent transparent transparent #1d9755;
}

/* The following takes care of the test clipping */
.table-wrap {
    display: table;
    width: 100%;
    height: 200px; /* this may be optional... */
    font-size: 1.00em;
    line-height: 1.50em;
    font-size: 5.0em;
}
.number-cell {
    display: table-cell;
}
.text-cell {
    display: table-cell;
}
.inner {
    height: 1.50em;
    overflow: hidden;
    word-break: break-all;
}

参见演示：http: //jsfiddle.net/audetwebdesign/uKryj/

CSS有两个部分。

.Right与绿色阴影和.green箭头主题相关的规则。这建立了一个定义良好的块级容器。

该div.Right块包含一个子块.table-wrap，它将包含文本和数字，并将采用如前面所示的剪辑：

同一行中的两个 div，一个 div 中的文本根据第二个 div 的宽度被剪裁

添加子块，.Right-after生成箭头主题。

于 2013-10-04T11:32:06.477 回答