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