HTML 位置变量

Question

我知道使用 Javascript 很容易，但是……有什么办法只使用 CSS 吗？

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

换句话说：red.x = min(green.x + green.w, beige.x+beige.w-red.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 的答案很棒，但我会用更多信息（需要的东西）更新问题，例如：

• 只有在 green:hover 时才会显示红色（这就是它在绿色内部的原因）
• 您不知道 CSS 中的米色宽度（在现实世界中，米色在具有定义宽度但在页面渲染之前不知道的内部）
• 绿色内容为变长文本，红色被推送的原因
• 如果绿色内容不适合父级，则应显示省略号（文本溢出：省略号；溢出：隐藏）
• 必须在 IE8+ 中工作

Answer 1

如果您能够将<a> 中的内容包装在span 中，那么试试这个。

HTML

<div class="beige">
    <a class="green" href="#">
      <span class="content">This is some text.</span><em class="red"></em>
    </a>
</div>

CSS

.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;
}

基本上<a class="green">、<span class="content"> 和<em class="red"> 必须是display: inline-block 和<span class="content"> 必须是width: 100% 和max-width <div class="beige"> 和@987654335 之间的差异@ 减去任何额外的填充/边距/边框等（因此在本例中，max-width: 364px）通过在span 上设置宽度，您可以强制将em 置于其容器之外，但通过设置max-width，您可以停止em 来自主包装之外。

这是一个示例的codepen.io 链接。

（注意：上面的大部分 CSS 只是为了让示例看起来像您的图像。）

更新：

1. 要显示或隐藏<em class="red">，请将:hover 伪类添加到.beige，并将可见性或不透明度添加到.red。 （如果要使用过渡，请使用不透明度。）

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

2. 因为<div class="beige">的宽度未知，所以不能使用CSS在<span class="content">上设置max-width。

   （max-width: calc(100% - 28px) 中的 100% 是 <a class="green"> 而不是 <div class="beige"> 的宽度。我也无法使用伪元素、定位、浮动或不同的显示类型（如 flex）来破解它。）

   解决方法是在CSS中修复<span class="content">的max-width（如上图）或者使用Javascript检测<div class="beige">的宽度，然后设置max-width。

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

我用可见性和 Javascript 版本更新了 example。

另外，我在.red 中添加了position: absolute，所以<span class="content"> 右侧没有空白空间。

Answer 2

所以我找到了一种只用 CSS 就可以处理这个问题的方法。我已经用一个例子设置了一个 jsbin。我没有花哨的滑块，所以您需要使用检查器工具来调整宽度或手动调整。

基本上，我将潜水设置为一张桌子。因为你不能放到不同的行，所以最右边的列被强制折叠，但因为它是绝对位置，所以块可见。容器的大小基于已更改为内联块以保持着色并推动其父级变大的块。请原谅我没有使样式与您在图形中的样式完全匹配。

http://jsfiddle.net/93u5E/3/

HTML

    <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>

CSS

.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;
}

*更新以包括悬停