0

我在博客上有一个帖子的页脚，帖子是动态的。页脚中有一些元素是左对齐的，一个是右对齐的，一个在它们之间应该填充剩余空间。

我以为我可以用

text-overflow:ellipsis

如果我将它设置为固定宽度，这会起作用，但目前，空间填充元素变得太大，所以最后一个元素会换行。

添加

white-space:nowrap;

到外部容器没有帮助。

如果空间填充元素总是填充剩余空间，即使它的内容不够大，这也是一个很好的奖励。

这是我的小提琴http://jsfiddle.net/MFxk5/，空间填充元素是

    <a href="c" class="c">...

感谢大家的帮助！也许有些人会将其标记为重复，但我认为与 text-overflow:ellipsis 的组合使其独一无二 - 我真的在寻找解决方案。

4

2 回答 2

2

听起来您想要一个固定流体固定布局，这就是您在纯 css 中的做法。如果不是你的意思，请告诉我。要查看的小提琴：http: //jsfiddle.net/rE2NC/只需左右移动视口，您将看到中间如何像宽度一样扩展收缩。

HTML

<div class="FooterContainer">
    <div class="Footer">
         <div class="Left">Left</div>
         <div class="Middle">Middle</div>
         <div class="Right">Right</div>  
     </div>
</div>

CSS

.FooterContainer {
    width:100%;
}

.Footer {
     padding-left:200px;  //or whatever width you want the .Left to be
     padding-right:200px; //or whatever width you want the .Right to be
}

.Left {
     width:200px; //Should match the padding-left of .Footer
     margin-left:-200px; //Should be the negative of the width
     float:left;
}

.Right {
     width:200px; //Should match the padding-right of .Footer
     margin-right:-200px; //Should be the negative of the width
     float:left;
}

.Middle {
     width:100%; //This fills the rest
     float:left;
     overflow:hidden; //use this to make sure text dont flow out
}
于 2013-06-05T19:30:01.303 回答
-1

jQuery 解决方案

我从一个 jQuery 辅助解决方案开始。

CSS看起来像：

div {
    width: 100%;
    overflow: auto;
}
a {
    border: 1px solid gray;
    margin: 3px;
    height: 50px;
    float: left;
}
.c {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d {
    float: right;
}

和 jQuery 函数：

$("div").each(function(){
    var innerWidth = 0;
    $(this).find("a").not(".flex").each(function(){
        innerWidth += $(this).outerWidth(true);
    });
    var flexWidth = $(this).width() - innerWidth - 9; /* padding + border + 1 */
    $(this).find(".flex").width(flexWidth);
});

有一个硬编码的常量表示左/右填充和带有 div 的柔性边框（a.c在您的示例中），并且出于某种原因，有一个 1px 调整以将浮动保持在单行上。（不太确定起源......）。

小提琴：http: //jsfiddle.net/audetwebdesign/HmvsN/

固定宽度与浮动的混合

我对 HTML 做了如下微调（移到a.d前面a.c）：

<div class="ex2">
    <a href="a" class="a">First column</a>
    <a href="b" class="b">Second column</a>
    <a href="d" class="d">Last column</a>
    <a href="c" class="c flex">Very long text...</a>
</div>

并使用以下 CSS：

.ex2 a {
    border: 1px solid gray;
    margin: 3px;
    height: 50px;    
}
.ex2 .a { 
    width: 90px;
    float: left;
}
.ex2 .b { 
    width: 90px;
    float: left;
}
.ex2 .c { 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    margin: 3px 100px 3px 199px;
}
.ex2 .d { 
    width: 90px;
    float: right;
}

本质上，浮动左边的两个元素和右边的一个，这样它就可以环绕更宽的元素。较宽元素的宽度具有左右边距以容纳浮动元素。

总的来说，这两种方法都有优点，但对于我们得到的东西来说，这似乎需要做很多工作......

于 2013-06-05T19:02:17.333 回答