让剩余空格填充剩余空间

基于this post我尝试使左侧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的盒子答案不工作。它看起来像，如果绿色文字变得更短：

我要的是绿色格变小了，当文本短。

来源

2016-11-17 Alex

你想同时在一行div？为什么不在左边div浮动？ –

是的正好......增加了左边的浮动，没有帮助 – Alex

这是很容易，如果你选择了一个flexbox - 看演示如下：

添加display: flex到您的包装并取下浮动小号
添加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>

来源

2016-11-17 09:12:10 kukkuz

似乎不起作用，请参阅我的编辑问题和截图。 – Alex

@亚历克斯请你再检查一下，它的工作情况！ – kukkuz

谢谢 - 真棒！ – Alex

您可以使用CSS Flexbox的。

使用display: flex;让家长<div>柔性容器，并给双方#left & #rightflex: 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>

希望这有助于！

来源

2016-11-17 09:12:17

让剩余空格填充剩余空间

回答

相关问题