在响应模式下更改位置的div

Question

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

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

看到下图。

http://craigaranha.com/responsiveheader/

感谢

Answer 1

没有看到你的代码，我不能100％肯定你的CSS结构是什么，但你可以用@media screen and (min-device-width: XXXpx) { }或@media screen and (min-width: XXXpx){ }启动。他们会检测设备的屏幕大小，并给你一些有条件的CSS规则。在那些规则中，如果你的右/左分区浮动，你可以浮动第三个并使用clear:both，或者你可以使用position: fixed; bottom: 0;。这真的取决于你的文档结构和当前的CSS。但希望这给了你一个起点。

就我个人而言，我认为position:fixed;将是一个快速和肮脏的解决方案太多，同样会去position:absolute;。

Answer 2

将左框左移，右框右移，让中框填充剩余空间。然后当屏幕较小时，只需在中间框上添加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