我想创建两个 DIV，一个容器 DIV(包含任意内容)和一个允许用户水平滚动内容的箭头 DIV。
忽略 Javascript 方面，基本布局和 CSS 可能是这样的:
<!DOCTYPE html>
<html>
<head>
<style>
.outer-wrapper {
min-width:275px;
overflow: hidden;
border: 1px solid #000000;
height: 40px;
}
.container {
width: 90%;
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
.inner-content {
margin-top: 10px;
white-space: no-wrap;
position: relative;
display: inline-block;
white-space: nowrap;
}
.inner-element {
display: inline-block;
}
.arrow {
margin-top: 12px;
min-width: 30px;
font-size: 10px;
text-align: right;
margin-right: 2px;
}
</style>
</head>
<body>
<div class = "outer-wrapper">
<div id = "container" class = "container">
<div class = "inner-content" id = "inner-content">
Options Options Options Options Options Options Options Options Options
</div>
</div>
<div id = "arrow" class = "arrow">
▶
</div>
</div>
</body>
</html>
这是一个显示渲染的 jsfiddle 链接: http://jsfiddle.net/RSTE9/1/
我遇到的问题是，理想情况下，我希望包含箭头的 DIV 尽可能小，以便屏幕的大部分宽度由容器 DIV 组成。
为了实现这一点，我想我应该将容器 DIV 的宽度设置为 98%，将箭头 DIV 的宽度设置为 2%。不幸的是，这会导致箭头 DIV 在较小的屏幕尺寸上换行到下一行。
主要问题是我希望箭头 DIV 始终占据屏幕的很小一部分，但我找不到使用百分比来实现此目的的方法。如果屏幕宽度很大，箭头 DIV 总是占用太多空间。但是如果屏幕宽度非常小(比如在移动设备上)，箭头 DIV 可能会被推到下一行。我试过不同的百分比值，但似乎无法获得理想值。我确定宽度为 90% - 这在小屏幕上看起来不错，但在大屏幕上这意味着箭头 DIV 占据了屏幕的 10%!
我正在考虑使用 CSS3 媒体查询来动态调整百分比，但我想知道是否有一些我只是没有想到的更简单的解决方案。
最佳答案
我建议使用 css calc 是答案: CSS Calc on MDN
给箭头 div 一个固定大小，给容器一个 calc(100%-30px):
.container {
width: calc(100%-30px);
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
这是一个关于 jsFiddle 的例子: http://jsfiddle.net/RSTE9/5/
请注意，我删除了一些选项选项，以便您可以更好地看到效果。 您确实在主容器上设置了最小宽度，以防止更多折叠。
关于html - 水平对齐两个 DIV，其中一个 DIV 为恒定宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16905248/