使左div填充剩余空间
[英]Make left div fill the remaining space
问题描述
根据这篇文章，我尝试让左边的div填满剩余的空间，左边和右边应该总是在一行中，右边的div应该是完全可见的。
怎么做到这一点？
#left { width: 100%; background-color: #ff0000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; float: left; } #right { float: right; background-color: #00FF00; }
<body> <div> <div id="left"> left text should have the remaining width and shortended if it is too long lorem ipsum minion dolor </div> <div id="right"> this text is dynamic - should be fully visibile </div> </div> </body>
编辑 ：
Flex-box回答不起作用。 看起来如果绿色文字变短了：
我想要的是绿色div现在变小，当文本很短。
2 个解决方案
解决方案1
3 已采纳 2016-11-17 09:12:10
如果您选择使用flexbox这很容易 - 请参阅下面的演示：
添加
display: flex到您的包装并移除浮动 s添加
white-space:nowrap到right
.wrapper { display:flex; } #left { width: 100%; background-color: #ff0000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex:1; } #right { background-color: #00FF00; white-space: nowrap; }
<div class="wrapper"> <div id="left"> left text should have the remaining width and shortended if it is too long lorem ipsum minion dolor </div> <div id="right"> this text is dynamic - should be fully visibile </div> </div>
解决方案2
0 2016-11-17 09:12:17
您可以使用CSS Flexbox 。
使用display: flex;将父<div>设为flex容器 并给#left ＆ #right flex: 1;
看看下面的代码：
.holder { display: flex; } #left { flex: 1; background-color: #ff0000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #right { flex: 1; background-color: #00FF00; }
<html> <head> <title>This is My Page's Title</title> </head> <body> <div class="holder"> <div id="left"> left text should have the remaining width and shortended if it is too long lorem ipsum minion dolor </div> <div id="right"> this text is dynamic - should be fully visibile </div> </div> </body> </html>
希望这可以帮助！
使div填充剩余空间
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.