HTML位置变量

我知道使用Javascript很容易，但是。。。有没有办法只使用CSS

假设在父元素（米色）中有两个元素（绿色和红色）。红色元素应始终位于绿色元素的右侧，除非绿色元素（由于内容）太大而无法容纳父元素，在这种情况下，红色元素将位于绿色元素之上（正常行为是红色元素位于绿色元素的右侧，因此由于父元素溢出而被隐藏）

换句话说：red.x=min（绿色.x+绿色.w，米色.x+米色.w-红色.w）

有关更多信息，请参见具体的HTML：

<div class="beige" style="width:250px"> <!-- parent with a given width (unknown until the page is rendered) & overflow hidden -->
  <a class="green"> <!-- link with display:inline -->
    content
    <em class="red"></em> <!-- actually a button, 15 px width -->
  </a>
</div>

内容

编辑：@kyledws答案很棒，但我会用更多信息（需要的东西）更新问题，例如：

• 红色仅在绿色：悬停时显示（这就是为什么它在绿色内）
• 您不知道CSS中的米色宽度（在现实世界中，米色位于具有定义宽度的内部，但在呈现页面之前不知道）
• 绿色内容是一个可变长度的文本，是红色被推送的原因
• 如果绿色内容不适合父级，则应显示省略号（文本溢出：省略号；溢出：隐藏）
• 必须在IE8中工作+

---

如果您能够将内容包装在

中，请链接到示例

（注意：上面的大多数CSS只是为了使示例看起来像您的图像。）

更新：

要显示或隐藏
请添加
：将
伪类悬停到
.beige
，将可见性或不透明度悬停到
.red
。（如果要使用过渡，请使用不透明度。）


由于
的宽度未知，因此无法使用CSS在
上设置
最大宽度

（最大宽度：calc（100%-28px）
中的100%是具有可见性和Javascript版本的
的宽度

另外，我在
中添加了
position:absolute
。red
因此
右侧没有空格。
因此我找到了一种方法，您可以在CSS中处理此问题。我用一个示例设置了一个jsbin。我没有花哨的滑块，因此您需要使用inspector工具调整宽度大小或手动执行此操作

基本上，我设置了一个表作为一个潜水。因为你不能下降到不同的行，最右边的列被强制折叠，但留下块可见，因为它是位置绝对的。容器的大小是基于块的大小，该块已更改为内联块，以保持颜色，并推动其父块变大。对不起我没有使样式与图形中的样式完全匹配


HTML

*更新到包含hover
真棒的答案！codepen.io也像一个符咒一样工作。有一件事：如果你在CSS时不知道米色的宽度怎么办？你可以通过javascript获得它并更新最大宽度，但是，有没有CSS唯一的方法？IE8不支持CSS calc，但无论如何我会接受你的答案，因为se它可以对其他人有用，因为它非常完整！总之，请随意改进它；）可以将
em.red
移到
a.green
之外，还是可以完全不更改结构？对于此应用程序，从语义上讲，最好将em移到a中，因为在现实世界中，em是一个在新窗口中打开链接的按钮，但我想如果有帮助的话，你可以将其移出…如果内容继续扩展，最终红色元素被“按下”并变为不可见：另外，“nowrap”实际上是“nowrap”。我更新了你的小提琴来显示它：顺便说一句，你不需要滑块来改变绿色层的长度，只需修改内容文本。
<div class="beige">
    <a class="green" href="#">
      <span class="content">This is some text.</span><em class="red"></em>
    </a>
</div>

.beige {
  background-color: #EBDFA0;
  height: 32px;
  overflow: hidden;
  border: 4px solid #EBDFA0;
  white-space: nowrap;
  width: 400px;
}

.green {
  background-color: #4CA73D;
  color: #222;
  display: inline-block;
  height: 100%;
  text-decoration: underline;
  vertical-align: middle;
}

.content {
  display: inline-block;
  height: 100%;
  margin-left: 4px;
  position: relative;
  width: 100%;
  max-width: 364px;
  top: -50%;
}

.red {
  border: 2px solid red;
  display: inline-block;
  height: 28px;
  position: absolute;
  width: 28px;
}

.red {
  opacity: 0;
}

.beige:hover .red {
  opacity: 1;
}

content.style.maxWidth = beige.clientWidth - red.clientWidth + "px";

    <div class="beige">
     <div class="table">
      <!-- parent with a given width & overflow hidden -->
    <ul>
        <li><a class="green"> <!-- link with display:inline -->
    content
  </a>
        </li>
        <li><em class="red"></em> 
            <!-- actually a button, 15 px width -->
        </li>
    </ul>
    </div>
</div>

.beige {
    background-color:grey;
    overflow:hidden;
    white-space:no-wrap;
}

.table{
    display:table;
}

ul {
    display:table-row;
    list-style-type:none;
}
li {
    display:table-cell;
    position:relative;
}

li:last-child{
    width:30px;
}
.green {
    display:inline-block;
    background-color:green;
}
.red {
    border:3px solid red;
    display:inline-block;
    width:20px;
    position:absolute;
    right:0px
}
li:hover + li .red{
height:20px;
}