html 设置页面其余部分的宽度答案

【问题标题】：html set width rest of pagehtml 设置页面其余部分的宽度
【发布时间】：2011-08-16 06:34:23
【问题描述】：

我有一个占据页面宽度 80% 的 inline-block 跨度，之后我有另一个 inline-block 跨度，它占据了 0.753em，现在我想制作第三个占据其余部分的跨度。

也许代码会更清楚：

<span style="width:80%; display:inline-block; background-color:lime"></span>
<span style="width:0.753em; display:inline-block"></span>
<span style="width:[?????????]; display:inline-block;background-color:lime"></span>

如前所述，第三个跨度应该占据页面的其余宽度，我应该设置什么宽度？

谢谢。

【问题讨论】：

就我而言，它始终是 100%。因此，如果您不指定宽度，它应该占用其余部分？如果我错了，请纠正我。否则我想你不知道 80% 是多少？这将产生一个计算元素宽度的小 JS。
@Richard 和 @Dave inline-block 适合内容（除非宽度属性另有说明）。 100% 用于block 元素。
如果我不指定宽度，第三个 span 会占用所需的宽度，并且因为这个 span 没有完全填充文本，所以不指定宽度会导致一些空白。问题是 - 这可以在没有 JS 的情况下完成吗？

标签： html css layout width

【解决方案1】：

我想不出使用display: inline-block 的方法。

相反，这是一个基于float 的解决方案：

Live Demo

<span style="float:left; width:80%; height:30px; background-color: lime"></span>
<span style="float:left; width:0.753em; height:30px; background-color: green"></span>
<span style="display:block; overflow:hidden; height:30px; background-color:red"></span>

为什么会这样？ http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

【讨论】：

@thirtydot，我的错，你是对的。在我的演奏中，我删除了overflow: hidden，这是让它发挥作用的关键。感谢您的跟进！
@SamuelNeff：没问题，它发生了。删除 cmets。