Question

我有两个元素，我总是想在一行中显示。第一个元素的可用宽度为100％，最大为350px，第二个元素的固定宽度为150px。

当父级（或浏览器）的宽度减小时，我希望第一个元素的宽度减小以调整同一行中的两个元素，但第二个元素移动到下一行

以下是示例代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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/

侨拉尔夫

两个内联块元素始终位于同一行

1 个答案: