1

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

当我减小屏幕尺寸（或在移动设备上查看）时，我希望发生的事情是 B 下降到两者下方，而 A 和 C 保持原位 - 每个都位于屏幕的相对两侧。

请参阅此插图。

http://craigaranha.com/responsiveheader/

谢谢

4

2 回答 2

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>

示例代码笔

于 2013-05-05T19:33:03.853 回答
0

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

就我个人而言，我认为position:fixed;这是一个快速而肮脏的解决方案，同样适用于position:absolute;.

于 2013-05-05T19:23:04.317 回答