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一个50px的填充

修改把它放在你想要填补空白的地方：

<div width="100px" height="1em"> <div>

Answer 6

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

你必须玩弄显示器，位置和左/顶等等，或者回过头来获取更多细节，以便人们知道你想要达到的目的。

Answer 7

这是怎么回事？

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


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

Updated version

内联块的动态宽度

7 个答案: