我正在使用导航栏,其右侧部分的内容宽度会有所不同,然后我希望左侧部分占用剩余的空间。我发现display: inline-block;
根据它的内容设置了元素宽度,但是我无法让左边的部分占用剩余的空间。
我发现了另一个问题,显示如果正确的部分是剩余部分(Set width to remainder of parent - dynamic width),如何做我想要的事情,并试图弄清楚如何使用这个概念反过来,但正确的部分结束了进入第二行。
最终我试图用聚合物核心工具栏来做这件事,但我甚至不能用一个非常简单的例子来解决这个问题。
HTML:
<div id="container">
<div id="left">main</div>
<div id="right">variable width content</div>
</div>
css(使用链接示例):
#container {
width: 100%;
height: 32px;
}
#left {
overflow: hidden;
height: 100%;
background-color: blue;
}
#right {
float: right;
max-width: 25%;
height: 100%;
background-color: grey;
}
css(使用内联块):
#container div{
position: absolute;
top: 0px;
height: 32px;
}
#left {
left: 0px;
background-color: blue;
}
#right {
right: 0px;
display: inline-block;
background-color: grey;
}
我不喜欢使用这些方法中的任何一种,这正是我在阅读几篇文章后一直在尝试的内容。