1

我想创建两个 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">
            &#x25b6;
        </div>
    </div>
</body>
</html>


这是一个显示渲染的 jsfiddle 链接：http: //jsfiddle.net/RSTE9/1/

我遇到的问题是，理想情况下，我希望包含箭头的 DIV 尽可能小，以便屏幕的大部分宽度由容器 DIV 组成。

为了实现这一点，我想我会将容器 DIV 设置为宽度98%，将箭头 DIV 设置为宽度为 2%。不幸的是，这会导致箭头 DIV 在较小的屏幕尺寸上换行到下一行。

基本问题是我希望箭头 DIV 始终占据屏幕的一小部分，但我找不到使用百分比的方法。如果屏幕宽度很大，箭头 DIV 总是占用太多空间。但是如果屏幕宽度非常小（比如在移动设备上），箭头 DIV 可能会被推到下一行。我尝试了不同的百分比值，但似乎没有办法获得理想的值。我确定了一个宽度90%——这在小屏幕上看起来不错，但在大屏幕上这意味着箭头 DIV 占据了 10% 的屏幕！

我正在考虑使用 CSS3 媒体查询来动态调整百分比，但我想知道是否有一些我没有想到的更简单的解决方案。

4

3 回答 3

1

我建议使用 css calc 将是答案： MDN 上的 CSS Calc

给箭头 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/

请注意，我删除了一些选项选项，以便您可以更好地看到效果。您在主容器上确实有一个最小宽度，这可以防止更多折叠。

于 2013-06-03T20:31:13.277 回答
0

似乎您对 float 、 display 和空白有点混乱。

显示和空白是一个很好的线索，宽度少一点。

这个想法是：

设置块容器宽度没有宽度也没有溢出，但设置边距和空白，

对于内部内容，将空白重置为正常，使用显示代替浮动。

将 min-width 设置为 text-content (100% - 给容器的边距)

最后，在两个内联框容器文本 + 箭头上进行垂直对齐。

.outer-wrapper {
    min-width:275px;
    white-space: nowrap;
    margin:0 1%;
}
.container {
    min-width:98%;
    margin-left: 0.5em;
    margin-right: 0.5em;
    min-height: 40px;
    vertical-align:middle;
    border: 1px solid #000000;
    display:inline-block;
    white-space:normal;
}
.arrow {
    font-size: 10px;
    width:1em;
    text-align: right;
    display:inline-block;
    vertical-align: middle;
}

http://jsfiddle.net/GCyrillus/2e3du/1/

于 2013-06-03T21:07:45.980 回答
0

为什么不将容器的宽度设置为“*”？

   .container {
        width: *;
        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/6/

于 2013-06-03T20:38:20.940 回答