本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

相邻浮动的 div 的动态宽度

发布于2021-09-15 05:36     阅读(1192)     评论(0)     点赞(0)     收藏(5)


我有两个 div,向左浮动的 fl-left 和向右浮动的 fl-right。两个 div 都没有固定的宽度,它们都需要内联。

<div class="wrapper">
<div class="fl-left">Hey diddle diddle the cat and the fiddle.</div>
<div class="fl-right">Btn1 Btn2</div>
</div>

两者的内容都是动态的。我想要做的是,当内容添加到 fl-left 或 fl-right 时,它们不应该分成第二行。他们应该相应地调整它们的宽度。

我怎样才能做到这一点?

如有必要,JSFiddle http://jsfiddle.net/MvWJN/

编辑:

fl-left 应该有 100% 的宽度减去 fl-right 占用的空间

当内容被添加到 fl-right 时,fl-left 的宽度应该被推动/调整


解决方案


不完全清楚您要做什么,但 display:table-cell 可能是最佳解决方案。

JSfiddle 演示

CSS

.fl-left {
    color:red;
}

.fl-right {
    text-align: right;
}

.wrapper {
    display: table;
    margin:10px;
    width:100%;
}
[class*=fl] {
    display:table-cell;
    border:1px solid grey;
}



所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/191711/9f2ca1231a12ddb4450d/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

0 0
收藏该文
已收藏

评论内容:(最多支持255个字符)