内联块的动态宽度

Question

我有两个<div>元素，一个紧挨着另一个。两者都有CSS属性display: inline-block;。现在第二个<div>元素的固定宽度为100 px，而第一个<div>元素没有固定的宽度：它取决于窗口的大小。

我的问题是，如果窗口很窄，第一个<div>元素将垂直扩展100％。我想将其宽度限制为100％减去100px，这样两个<div>元素都可以随时对齐。

我看过有类似问题的帖子，但没有一个真正处理过inline-block的情况。

编辑：这是一个jsfiddle：http://jsfiddle.net/y3sXu/我希望第一个<div>为同一条线上的第二个<div>提供一些空间。

Answer 1

没有特别的理由使用display: inline-block来做到这一点。

这是一个使用浮点数的干净实现：http://jsfiddle.net/y3sXu/14/

<div id="container">
    <div id="DivB">b</div>
    <div id="DivA">a</div>
</div>

#container {
    overflow: hidden;
}
#DivA {
    overflow: hidden;
}
#DivB {
    float: right;
    width: 100px;
}

Answer 2

我想我明白你的要求。 http://jsfiddle.net/y3sXu/6/

我已经选择了传统的两列布局，因为它似乎是解决问题的最佳方法。

float已被用来确保右手div始终位于右侧，而margin-left则保持左侧div远离。 overflow:hidden使用便宜又开朗的clearfix。

Answer 3

这是一个老问题，但谷歌有一定的分量，所以我想我会用新答案更新它。更现代的方法是坚持使用display:inline-block;并使用calc作为可变元素的宽度。

只要您有一个固定宽度的内联元素width: 150px，就可以使用固定宽度calc(100% - 150px)来偏移可变宽度元素。

您的代码应如下所示：

.fixed-width-element {
  display: inline-block;
  width: 150px;
}

.variable-width-element {
  display: inline-block;
  width: calc(100% - 150px);
}

Answer 4

我能想到的最佳方式是绝对定位：

div#TextB{
    position:absolute;
    right:10px;
    top:10px;
}

div#master{
    margin-right:120px;
}

http://jsfiddle.net/Vnxr7/1

Answer 5

有一个非常难看的解决方案：将外部div的溢出设置为隐藏，使用position：relative将dd取出dom，将左边设置为-100px，将宽度设置为100％。

您必须使用显示器，位置和左/顶部等，或者回过头来获取更多详细信息，以便了解您想要实现的目标。

Answer 6

那这个呢 ？

div {
    background:green;
    margin-right:100px;
}


#TextB{
    width:100px;
    background:red;
    float:right;
    margin:0px;
}

Updated version

Answer 7

只需在左侧和右侧给外部div一个50px的填充

编辑把它放在你想要填补空白的地方：

<div width="100px" height="1em">&nbsp;<div>