我的布局有一个奇怪的部分,左侧是图像,右侧是一些复制文本。以下部分(偶数)是副本在左侧,图像在右侧(依此类推......)
现在,在断点之后(对于移动设备)我希望文本首先然后是图像...依此类推......如何翻转div框(以便图像始终在复制div框之后?怎么能我用CSS管理这个吗?
到目前为止,我可以在断点之后管理每个div为100%,但是这样的安排会保持不变...
非常感谢您的帮助!
这是我的代码:
* {box-sizing: border-box; margin: 0; padding: 0;}
#wrap {max-width: 960px; height: 2120px; margin: 0 auto; background-color: gray;}
.even {background-color: orange;}
.odd {background-color: skyblue;}
.pic, .copy {height: 200px; margin: 4% 3%;}
.copy {background-color: pink;}
@media screen and (min-width:320px) {.pic, .copy {width: 100%;}}
@media screen and (min-width:668px) {.pic, .copy {width: 44%; float: left;}}
<div id="wrap">
<section class="odd">
<div class="pic">IMAGE</div>
<div class="copy">TEXT</div>
</section>
<section class="even">
<div class="copy">TEXT</div>
<div class="pic">IMAGE</div>
</section>
<section class="odd">
<div class="pic">IMAGE</div>
<div class="copy">TEXT</div>
</section>
<section class="even">
<div class="copy">TEXT</div>
<div class="pic">IMAGE</div>
</section>
</div>
答案 0 :(得分:0)
以下是修复:http://codepen.io/gilalberto/pen/pyRBwQ
我将HTML更改为所需的移动订单(复制,然后是图片),而对于桌面,我添加了规则:
@media screen and (min-width:668px) {
.odd .copy {
float: right;
}
}
因此,奇数会将文本移到右侧。
此外,我为浮动添加了一个clearfix,在codepen中有一个链接和注释。
尝试使HTML,CSS和JS首先用于移动设备,然后使用媒体查询或桌面JS进行更改。在开发响应式设计http://zellwk.com/blog/how-to-write-mobile-first-css/
时,移动优先开发将变得非常方便