更换浮动时,Div不会改变小分辨率的位置

时间:2015-10-19 13:22:16

标签: html css

我正在使我的网站响应,而dekstop版本的布局如下:

|    HEADER    |
<br>
| TEXT | IMAGE |
<br>
| IMAGE | TEXT |
<br>
| TEXT | IMAGE |

我想要的是:
在电话分辨率时,我进行了媒体查询,以便所有图像向左浮动,文本浮动正确。像这样:

|    HEADER    |<br>

|     IMAGE    |<br>
|     TEXT     |<br><br>
|     IMAGE    |<br>
|     TEXT     |<br><br>
|     IMAGE    |<br>
|     TEXT     |

它实际上做了什么:
然而,它坚持html的布局,当我在dekstop分辨率时,它确实改变了图像的位置向左和文本向右,但在电话分辨率时它保持原始布局和它像这样搞砸了:

|    HEADER    |
<br>
| TEXT |<br> IMAGE |
<br>
| IMAGE |<br> TEXT |
<br>
| TEXT |<br> IMAGE |

html / php code (遗漏了php&amp; content)

<div class="productcol">

        <div class="productimg"> 

        </div>


        <div class="producteentweede">

            <div class="producttext">


            </div>

        </div>

    </div>

    <div class="productcol">

        <div class="producteentweede">

            <div class="producttext">


            </div>

        </div>

        <div class="productimg"> 

        </div>

    </div>

CSS

        .productcol{
        width:100%;
        margin-left:0;
    }

    .producteentweede{
        width:50%;
        position:relative;
        float:left;
    }

    .productimg{
        width:50%;
        position:relative;
        float:left;
        height:30em;
    }


@media all and (max-width: 620px) {

    .producteentweede{
        float:right!important;
        display:block;
        width:100%;
    }

    .productimg{
        float:left!important;
        display:block;
        width:100%;
        height:22em;
    }
}

1 个答案:

答案 0 :(得分:0)

我认为您应首先更改HTML结构,然后使用CSS调整“全尺寸”布局和“移动”布局的布局。您可以为图像/文本元素指定类,以告诉它们是否应该向右或向左移动:

<div class="productcol">
    <div class="producteentweede right">
        <div class="producttext">

        </div>
    </div>
    <div class="productimg left">

    </div>
</div>
<div class="productcol">
    <div class="producteentweede left">
        <div class="producttext">

        </div>
    </div>
    <div class="productimg right">

    </div>
</div>

然后你可以添加一些CSS来实现“全尺寸”布局。 “移动”布局应该正常工作,因为HTML结构已被修复。

.producteentweede, .productimg{
    display:block;
    width:50%;
    height:10em;
    float:left;
}
.left {
    float: left;
}
.right {
    float: right;
}

这是结果的JSFiddle:https://jsfiddle.net/mqszbej6/