最近在用wordpress寫頁面時，設計師給出了一種網頁排布圖樣，之前從未遇到過，其在電腦上（解析度大於768px）的如下：
而在手機（解析度小於等於768px）上要求這樣排列：
我想到了兩種方法
第一種是用bootstrap的row、col-md配合col-md-push、col-md-pull來實現，代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="stylesheet" href="../../vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css" media="screen" title="no title"> 7 <title>p左右交叉布局--文字和圖片交叉</title> 8 </head> 9 <body>10 <style>11 .C {12 margin: auto;13 padding: 30px 20px 40px;14 max-width: 600px;15 }16 .I {17 width: 100%;18 }19 .IW, .TW {20 border: 1px solid rgba(0, 0, 0, 0.3);;21 }22 .TW {23 padding: 25%;24 }25 </style>26 <p class="C">27 <p class="row">28 <p class="col-md-6">29 <p class="IW">30 <img class="I" src="../../asset/images/flex/r1.jpg" alt="">31 </p>32 </p>33 <p class="col-md-6">34 <p class="TW">我是文字，我用到了padding來實現大致置中</p>35 </p>36 </p>37 <p class="row">38 <p class="col-md-6 col-md-push-6">39 <p class="IW">40 <img class="I" src="../../asset/images/flex/r1.jpg" alt="">41 </p>42 </p>43 <p class="col-md-6 col-md-pull-6">44 <p class="TW">我是文字，我用到了padding來實現大致置中</p>45 </p>46 </p>47 <p class="row">48 <p class="col-md-6">49 <p class="IW">50 <img class="I" src="../../asset/images/flex/r1.jpg" alt="">51 </p>52 </p>53 <p class="col-md-6">54 <p class="TW">我是文字，我用到了padding來實現大致置中</p>55 </p>56 </p>57 </p>58 </body>59 </html>
電腦上效果：
手機上效果：
用bootstrap這種方法需要寫多個row（我試著用一個row來實現，但沒成功），另外需要注意的就是，在col-md這層，最好不要再另外添加類（樣式），如果需要控制裡層的元素（上面的例子中是圖片和文字），比如加個padding之類的，可以再加一層p來寫樣式。
第二種方法用flex布局中的flex-direction: row-reverse來實現，代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>p左右交叉布局--文字和圖片交叉</title> 7 </head> 8 <body> 9 <style>10 .C {11 margin: auto;12 padding: 30px 20px 40px;13 max-width: 600px;14 }15 .R {16 display: block;17 width: 100%;18 }19 @media only screen and (min-width: 768px) {20 .R {21 display: flex;22 width: 100%;23 }24 }25 .R:nth-child(even) {26 flex-direction: row-reverse;27 }28 .I, .W {29 width: 50%;30 }31 .I img {32 width: 100%;33 }34 .W {35 display: flex;36 flex-direction: column;37 font-size: 16px;38 justify-content: center;39 }40 </style>41 <p class="C">42 <p class="R">43 <p class="I"><img src="../images/flex/r1.jpg" alt=""></p>44 <p class="W">我是文字，我使用了flex布局，我按column在主軸y軸上置中對齊。</p>45 </p>46 <p class="R">47 <p class="I"><img src="../images/flex/r1.jpg" alt=""></p>48 <p class="W">我是文字，我使用了flex布局，我按column在主軸y軸上置中對齊。</p>49 </p>50 <p class="R">51 <p class="I"><img src="../images/flex/r1.jpg" alt=""></p>52 <p class="W">我是文字，我使用了flex布局，我按column在主軸y軸上置中對齊。</p>53 </p>54 </p>55 </body>56 </html>
電腦上效果如下：
手機上效果如下：
可以看到，用flex實現要靈活一些， 所有的p都按row排列，其中的關鍵在於讓偶數行反向排列： .R:nth-child(even) { flex-direction: row-reverse; } ，然後在手機上讓其正常排列即可 .R { display: block; width: 100%; } 。
我還發現，用flex可以很容易的實現兩個p底部對齊，具體代碼如下：
.C { display: flex; align-items: flex-end;}.A { background: rgba(255, 0, 0, 0.1);}.A:nth-child(odd) { background: #1a88ea; color: white; font-size: 30px; padding: 10px 15px;}</style><p class="C"> <p class="A">創新</p> <p class="A">實驗基地</p></p>
其實就是讓C內的p，以主軸為x（按row排列時，主軸即為x，未指明flex-diretion時，預設為按row排列），排布方向為row，然後讓p都在y軸(交叉軸)上處於底部 align-items: flex-end;
效果如下：
當然，也可以用其他方法來實現。比如，讓C相對定位，讓C內其中的一個p絕對位置，然後通過設定bottom為0即可，代碼如下，效果同上。
<style media="screen">.C { position: relative;}.A { display: inline-block; background: rgba(255, 0, 0, 0.1);}.A:nth-child(odd) { background: #1a88ea; color: white; font-size: 30px; padding: 10px 15px;}.A:nth-child(even) { bottom: 0; position: absolute;}</style><p class="C"> <p class="A">創新</p> <p class="A">實驗基地</p></p>
不過顯然，用flex實現更加簡便。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
