Question

一个基本的探测问题，我找不到答案。

使元素拉伸以使用页面的剩余宽度并不是什么新鲜事。与更换并排元件以在小屏幕上堆叠相同。这两种情况都允许您选择元素顺序/组合（例如浮点数：方向;以及顶部/底部的DOM元素顺序）但是如何在执行这两者时设置顺序？我想你可以说我想控制我的元素堆栈溢出。 wink wink nudge nudge

“块格式化上下文”技巧让我如此接近我想要的东西 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标记中。

CSS：填充下部元素的剩余宽度空间

一个基本的探测问题，我找不到答案。

1 个答案: