Question

我正在使我的网站响应，而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;
    }
}

Answer 1

我认为您应首先更改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/

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

1 个答案: