当右元素具有可变宽度时,如何设置左元素以使用其余部分的父元素宽度?

时间:2015-01-27 17:07:48

标签: css

我正在使用导航栏,其右侧部分的内容宽度会有所不同,然后我希望左侧部分占用剩余的空间。我发现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;
}

Linked example fiddle

Inline-block fiddle

我不喜欢使用这些方法中的任何一种,这正是我在阅读几篇文章后一直在尝试的内容。

0 个答案:

没有答案