CSS - Calc替代品

时间:2014-07-03 05:56:12

标签: css3 css-selectors width

我开发的代码完全正常,但由于我使用了calc函数,有些浏览器不支持它。我不知道如何使用替代品。

我已经看到了一些答案,并尝试使用相对的绝对位置。但是,它们都没有适用于我的场景。

我的代码:

HTML:

<div class="row">
    <img height="35" width="35" class="img left" />
    <div class="title left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices orci mauris, sit amet luctus enim sodales id.</div>
    <div class="right">
        <div class="type"></div>
    </div>
    <div class="clr"></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices orci mauris.</div>
</div>

CSS:

.title{width:calc(100% - 50px);} // 35px of image + 5px margin + 10px of icon

请在此处查看Fiddle

PS:我只想要CSS解决方案。现在,由于我没有任何解决方案,我使用javascript来调整宽度。

任何帮助将不胜感激。谢谢你的时间。

1 个答案:

答案 0 :(得分:1)

这是你想要 Demo

.title {
    margin:0 10px 0 40px;
}