两个inline-block元素总是在同一行上

Question

我有两个元素，希望它们总是在同一行显示。第一个元素的宽度可以达到最大350px，但不超过父级容器的100%；第二个元素的宽度为150px。

当父级容器（或浏览器）的宽度缩小时，我希望第一个元素的宽度也随之减小，以便两个元素仍在同一行，但第二个元素会移动到下一行。

以下是示例代码：

span {
    height: 30px;
    display: inline-block;
 }
.span1 {
    background: red;
    max-width: 350px;
    width: 100%;
}
.span2 {
    background: blue;
    width: 150px;
}

<span class="span1"></span>
<span class="span2"></span>

- dusk7

---

你尝试过什么了吗，比如媒体查询？ - undefined

是的，但那只会针对特定的视口尺寸。我希望这个能够普遍适用（因为这只是一个例子，实际情况相当复杂） :) - undefined

你的元素大小已经涉及到具体的像素宽度了。你的实际代码也是这样吗？ - undefined

Answer 1

好的，这是一个例子：

span {
  height: 30px;
  display: inline-block;
  margin-right: -.25em;
}
.span1 {
  background: red;
  width: 350px;
  max-width: calc(100% - 150px);
}
.span2 {
  background: blue;
  width: 150px;
}

我不确定我是否正确理解了你的意思。这里有一份范例：http://jsfiddle.net/cmy45soz/

你好， Ralf

- RWAM

---

这正是我想要的。谢谢！ - undefined