html - CSS:填充较低元素的剩余宽度空间

Question

我找不到答案的基本问题。

让元素拉伸(stretch)以使用页面的剩余宽度并不是什么新鲜事。与更改并排元素以堆叠在小屏幕上相同。这两种情况都允许您选择元素顺序/组合(例如， float :方向；顶部/底部的 DOM 元素顺序)但是在执行这两种操作时如何设置顺序？我猜你可能会说我想控制我的元素堆栈溢出。 眨眼眨眼轻推

“ block 格式化上下文”技巧让我非常接近我想要的东西。
HTML:

<div class="blue">Some navigation list items.</div>
<div class="red">Search box expanding to cover empty space.</div>

CSS:

.red {    
width:auto;
height:150px;
background:red;
min-width:200px;
overflow:hidden;
}
.blue {
height:150px;
width:300px;
background:blue;
float:left;
}

http://jsfiddle.net/A8zLY/5503/
在我的例子中，如何在达到阈值(最小宽度)时让“红色”(动态大小的框)位于顶部？我不能使用媒体查询作为导航列表元素可以改变。

Answer 1

好了，开始吧。

虽然我不确定你想要完成什么，而且这个解决方案可能不符合你的布局需求，但这里有一个解决问题的方法 - 切换两个元素的位置并添加这个 css:

html, body {
  padding:0;
  margin:0;
}
.red {
  position:relative;
  margin-left:300px;
  height:150px;
  background:red;
}

.blue {
  position:absolute;
  left:0;
  top:0;
  height: 150px;
  width: 300px;
  background: blue;
}
@media (max-width:300px) {
  .blue {
    position:static;
    width:100%;
  }
  .red {
    margin-left:0;
  }
}

http://jsfiddle.net/A8zLY/5506/

我使用媒体查询断点来包装这两个元素。

元素在包装时要放在其他元素之上的唯一方法是在 HTML 标记中放在最前面。