浮动元素被上一个元素下推 [英] floated element being pushed down by previous element

问题描述

媒体查询堆栈示例

http://jsfiddle.net/4gw8wank/

I have 3 container as part of a responsive page. In the mobile view they must display in the order- blue, red, green, stacked on top of each other like so..

<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>

which is fine, but in a desktop experience, using the same markup, they must display as shown in the fiddle above, i.e. with the blue and green containers to the right, with a fixed width, and the red container to the left, whereby the red container must span the remaining width of the page, like so:

I am seeing a problem where at smaller resolutions, the green container will be pushed down, see below

Is there any way I can get around this?

解决方案

You can use the following styles:

.test1 {
    padding-right:200px;
}
.right {
    float:right;
    width:200px;
    margin-right:-200px;
    clear:right;
}
.left {
    float:left;
    width:100%;
}

Example

Example with media query stacking

这篇关于浮动元素被上一个元素下推的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！