Question

我的标题（A，B和C）中有3个元素，其中A和C是静态图像，B是文本的流体div。

当我减小屏幕尺寸（或移动设备上的视图）时，我想要发生的是B低于两者，而A和C保持在原位 - 每个都位于屏幕的两侧。

参见此插图。

http://craigaranha.com/responsiveheader/

感谢

Answer 1

将左框浮动到左侧，右框浮动到右侧，让中间框填充剩余空间。然后，当屏幕较小时，只需在中间框上添加clear:both即可使其下拉。

这样的事情：

.left, .right {
  width:50px;
  height:50px;
  text-align:center;
  line-height:50px;
}
.left {
  background-color:blue;
  float:left;
}
.right {
  background-color:magenta;
  float:right;
}

.middle {
  background-color:silver;
  height:50px;
  line-height:50px;
}

@media all and (max-width:800px) {
  .middle {
    clear:both;
  }
}

假设这样的标记：

<div class="left">A</div>
<div class="right">C</div>
<div class="middle">B is a fluid box of text.</div>

Example codepen

Answer 2

如果没有看到您的代码，我无法100％确定您的CSS结构是什么，但您可以从@media screen and (min-device-width: XXXpx) { }或@media screen and (min-width: XXXpx){ }开始。他们将检测设备屏幕大小并为您提供一些条件CSS规则。在这些规则中，如果您的右/左div被浮动，您可以浮动第三个并使用clear:both，或者您可以使用position: fixed; bottom: 0;。这实际上取决于您的文档结构和当前的CSS。希望这给你一个起点。

就我个人而言，我认为position:fixed;会是一个快速而肮脏的解决方案，position:absolute;也是如此。

Div以响应模式更改位置

2 个答案: