在可调整大小的jQuery jQuery内部,我有许多行div,并且在每一行中都有一个左右浮动div。当可调整大小的div小于两个浮动div时,我希望左侧浮动div使用text-overflow:省略号。正确的浮动式潜水尺码应保持相同。正如另一个问题所建议的那样,我尝试给左div留有一个右边距,但这似乎忽略了可调整大小的div的大小。
这是我目标的一个示例:
全尺寸行:
left div right div
行调整为较小的宽度:
lef... right div
的HTML:
<div resizable>
<div class="row">
<div class="floatleft">test1 hello</div>
<div class="floatright">test2 hello</div>
</div>
<div class="row">
<div class="floatleft">test3 hello</div>
<div class="floatright">test4 hello</div>
</div>
</div>
CSS:
div[resizable] {
border: 1px solid Black;
width: 50%;
}
.floatleft {
float: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 10px;
}
.floatright {
float: right;
white-space: nowrap;
}
.row {
overflow: hidden;
}
小提琴(使用angularjs,但不用担心):
http://jsfiddle.net/dfjrp8h5/1/
如果您能解释为什么浮动div右边距无效的话,您会获得加分。谢谢!
你为什么float:left
离开<div>
?首先在代码必须是正确的<div>
有float:right
。左挡必须overflow:hidden
要清理。
HTML:
<div resizable>
<div class="row">
<div class="floatright">test2 hello</div>
<div class="floatleft">test1 hello</div>
</div>
<div class="row">
<div class="floatright">test4 hello</div>
<div class="floatleft">test3 hello</div>
</div>
</div>
CSS:
.floatleft {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.floatright {
float: right;
white-space: nowrap;
margin-left:10px;
}
margin-right
在浮动<div>
工作中很好。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句