Question

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

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

换句话说：red.x = min（green.x + green.w，beige.x + beige.w-red.w）

Example image

有关详细信息，请参阅具体的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 +

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%且{{1} } max-width和<div class="beige">之间的差异减去任何额外的填充/边距/边界等（因此在此示例中，<em class="red"）通过在{{1上设置宽度你强制max-width: 364px在它的容器之外，但是通过设置span，你可以阻止em在主包装之外流动。

以下是示例的codepen.io链接。

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

<强>更新

要显示或隐藏max-width，请将em伪类添加到<em class="red">，将可见性或不透明度添加到:hover。（如果要使用转换，请使用不透明度。）
```
.beige
```
由于.red的宽度未知，因此您无法使用CSS在.red { opacity: 0; } .beige:hover .red { opacity: 1; }上设置<div class="beige">。

（max-width中的100％是<span class="content">而不是max-width: calc(100% - 28px)的宽度。我无法用伪元素，定位，浮点或不同的显示类型（如flex）来破解它。）

解决这个问题的方法是修复CSS中<a class="green">的{{1}}（如上所示）或使用Javascript检测<div class="beige">的宽度，然后设置{{ 1}}。
```
max-width
```

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

另外，我向<span class="content">添加了<div class="beige">，因此max-width右边没有空格。

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

*正在更新以包含悬停

HTML位置变量

2 个答案: