Html 水平对齐两个DIV，其中一个DIV为恒定宽度_Html_Css

Html 水平对齐两个DIV，其中一个DIV为恒定宽度

html css

Html 水平对齐两个DIV，其中一个DIV为恒定宽度,html,css,Html,Css,我想创建两个DIV，一个container DIV（包含任意内容）和一个arrow DIV（允许用户水平滚动内容）忽略Javascript方面，基本布局和CSS可能类似于： <!DOCTYPE html> <html> <head> <style> .outer-wrapper { min-width:275px; overflow: hidden; border: 1px solid #000000; heig

我想创建两个DIV，一个container DIV（包含任意内容）和一个arrow 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>


.外包装{
最小宽度：275px；
溢出：隐藏；
边框：1px实心#000000；
高度：40px；
}
.集装箱{
宽度：90%；
最小宽度：100px；
左边距：0.5em；
右边距：0.5em；
高度：40px；
溢出：隐藏；
空白：nowrap；
浮动：左；
}
.内在内容{
边缘顶部：10px；
空白：无换行；
位置：相对位置；
显示：内联块；
空白：nowrap；
}
.内部要素{
显示：内联块；
}
.阿罗{
边缘顶部：12px；
最小宽度：30px；
字体大小：10px；
文本对齐：右对齐；
右边距：2px；
}
选项选项
▶；

这里有一个显示呈现的JSFIDLE链接：

我遇到的问题是，理想情况下，我希望包含箭头的DIV尽可能小，这样屏幕的大部分宽度都由container DIV组成

为了实现这一点，我认为应该将container DIV的宽度设置为like

98%

，将arrow DIV的宽度设置为like 2%。不幸的是，这会导致arrow DIV在较小屏幕上换行到下一行

基本问题是，我希望箭头DIV始终占据屏幕的一小部分，但我找不到一种使用百分比的方法。如果屏幕宽度较大，则箭头DIV总是占用太多空间。但是如果屏幕宽度很小（比如在移动设备上），arrow DIV可能会被推到下一行。我使用了不同的百分比值，但似乎无法获得理想值。我设定的宽度为

90%

——这在小屏幕上看起来不错，但在大屏幕上，这意味着箭头DIV占据了屏幕的10%

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

我建议使用css calc将是答案：

给箭头div一个固定大小，给容器一个计算值（100%-30px）：

下面是一个关于JSFIDLE的示例：

请注意，我删除了一些选项，以便您可以更好地看到效果。

主容器上确实有一个最小宽度，以防止更多的折叠。

我建议使用css calc将是答案：

给箭头div一个固定大小，给容器一个计算值（100%-30px）：

下面是一个关于JSFIDLE的示例：

请注意，我删除了一些选项，以便您可以更好地看到效果。

主容器上有一个最小宽度，可以防止更多的折叠。

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

jsIDLE:

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

jsFiddle:

看起来您在浮点、显示和空白方面有点混乱

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

这个想法是：

设置块容器宽度-不设置宽度或溢出，但设置边距和空白

对于内部内容，请将空白重置为正常，使用“显示”而不是“浮动”

将最小宽度设置为文本内容（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;
}

看起来您在浮动、显示和空白方面有点混乱