1. 首頁
  2. 問答
  3. 基於屏幕尺寸重新排序浮動元素CSS

基於屏幕尺寸重新排序浮動元素CSS

2016-06-18 54 views
0

我需要做的是在桌面上顯示交錯的推薦集，然後在屏幕低於979px時切換到垂直類型的佈局。這個人的圖像和名字應該在最上面作爲標題，並且直接在下面顯示證言文本。我有一個fiddle here。您可以看到，當視口很寬時，存在交錯的佈局，但是當您縮小視圖時，佈局會切換到更垂直的佈局以顯示圖像位於左側的推薦。基於屏幕尺寸重新排序浮動元素CSS

我需要的是對於圖片在右側看的感言，就像圖片在左邊的感言。我能夠做到這一點的唯一方法是改變右側圖像的證明順序，以便將圖像包裝放置在文本包裝上方並將圖像包裝浮動到右側。問題在於它打破了inline-block元素的vertical-align: middle。

我想知道是否有不同的方式來完成我的垂直佈局目標使用純CSS？我知道我可以很容易地用Javascript做到這一點，但如果不需要，我寧願不使用它。

這裏是我的代碼：使用flexbox（其中有IE10 +部分支持），你可以做到這一點使用order和align-self

你一定要照顧

img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    vertical-align: middle; 
 
    border: 0; 
 
} 
 
.about-wrapper .spacer { 
 
    height: 75px; 
 
} 
 
.about-wrapper h1.customer-testimonial-header { 
 
    text-align: center; 
 
    font-size: 2rem; 
 
    font-weight: 600; 
 
    color: white; 
 
} 
 
.about-wrapper .bubble p { 
 
    font-size: 0.9rem; 
 
} 
 
.about-wrapper .bubble { 
 
    position: relative; 
 
    padding: 35px; 
 
    background: #FFFFFF; 
 
    -webkit-border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
    border-radius: 0px; 
 
    border: #cecece solid 1px; 
 
} 
 
.about-wrapper .bubble:after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 1; 
 
    top: 50%; 
 
    border-color: transparent #FFFFFF; 
 
} 
 
.about-wrapper .bubble:before { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-color: transparent #cecece; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 0; 
 
    top: 50%; 
 
} 
 
.about-wrapper .bubble-left:after { 
 
    border-width: 15px 20px 15px 0; 
 
    left: -19px; 
 
} 
 
.about-wrapper .bubble-left:before { 
 
    border-width: 15px 20px 15px 0; 
 
    left: -21px; 
 
} 
 
.about-wrapper .bubble-right:after { 
 
    border-width: 15px 0px 15px 20px; 
 
    right: -19px; 
 
} 
 
.about-wrapper .bubble-right:before { 
 
    border-width: 15px 0px 15px 20px; 
 
    right: -21px; 
 
} 
 
.about-wrapper .left-one-quarter { 
 
    width: 34%; 
 
    text-align: center; 
 
} 
 
.about-wrapper .right-three-quarter { 
 
    width: 65%; 
 
} 
 
.about-wrapper .right-one-quarter { 
 
    width: 34%; 
 
    text-align: center; 
 
} 
 
.about-wrapper .left-three-quarter { 
 
    width: 65%; 
 
} 
 
.about-wrapper .column { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.about-wrapper .testimonial-text:before { 
 
    content: ' '; 
 
    background: url(/skin/frontend/default/sns_nino/images/icons/quotation-start.png); 
 
    height: 16px; 
 
    width: 20px; 
 
    position: absolute; 
 
    left: 10px; 
 
} 
 
.about-wrapper .testimonial-text:after { 
 
    content: ' '; 
 
    background: url(/skin/frontend/default/sns_nino/images/icons/quotation-end.png); 
 
    height: 16px; 
 
    width: 20px; 
 
    position: absolute; 
 
    right: 10px; 
 
} 
 
.about-wrapper .testimonial-name-wrapper { 
 
    margin-top: 15px; 
 
} 
 
.about-wrapper .about-banner { 
 
    position: relative; 
 
} 
 
.about-wrapper .about-banner .banner-text { 
 
    font-size: 2.3rem; 
 
    position: absolute; 
 
    top: 50%; 
 
} 
 
@media (min-width: 768px) and (max-width: 979px) { 
 
    .about-wrapper .left-one-quarter { 
 
    border-top: 1px solid; 
 
    padding: 20px 0 20px 10px; 
 
    border-bottom: 1px solid; 
 
    float: left; 
 
    width: 100%; 
 
    text-align: left; 
 
    } 
 
    .about-wrapper .right-three-quarter { 
 
    width: 100%; 
 
    } 
 
    .about-wrapper .testimonial-image-wrapper { 
 
    width: 20%; 
 
    display: inline-block; 
 
    } 
 
    .about-wrapper .testimonial-name-wrapper { 
 
    float: none; 
 
    display: inline-block; 
 
    margin-top: 15px; 
 
    } 
 
    .about-wrapper .testimonial-name-wrapper > strong { 
 
    margin-left: 20px; 
 
    vertical-align: middle; 
 
    font-weight: 500; 
 
    font-size: 1.5rem; 
 
    } 
 
    .about-wrapper .testimonial-name-wrapper > span { 
 
    display: none; 
 
    } 
 
    .about-wrapper .bubble-left { 
 
    border: none; 
 
    } 
 
    .about-wrapper .bubble:after, 
 
    .about-wrapper .bubble:before { 
 
    content: none; 
 
    } 
 
    .about-wrapper .testimonial-text:before, 
 
    .about-wrapper .testimonial-text:after { 
 
    content: none; 
 
    } 
 
}
<div class="about-wrapper"> 
 
    <div class="testimonial-content"> 
 
    <div class="left-one-quarter column"> 
 
     <div class="testimonial-image-wrapper"> 
 
     <img src="http://placekitten.com/250/250" alt=""> 
 
     </div> 
 
     <div class="testimonial-name-wrapper"><strong>Example Person</strong> 
 
     <br> <span>Nowhere Ville, Alaska</span> 
 
     </div> 
 
    </div> 
 
    <div class="right-three-quarter column"> 
 
     <div class="bubble-left bubble"> 
 
     <p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent 
 
      pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut 
 
      venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue. 
 
      Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit 
 
      amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum 
 
      lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus 
 
      finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus 
 
      et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat 
 
      vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor. 
 
      Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci 
 
      metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="spacer">&nbsp;</div> 
 
    <div class="testimonial-content"> 
 
    <div class="left-three-quarter column"> 
 
     <div class="bubble-right bubble"> 
 
     <p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent 
 
      pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut 
 
      venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue. 
 
      Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit 
 
      amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum 
 
      lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus 
 
      finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus 
 
      et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat 
 
      vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor. 
 
      Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci 
 
      metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p> 
 
     </div> 
 
    </div> 
 
    <div class="right-one-quarter column"> 
 
     <div class="testimonial-image-wrapper"> 
 
     <img src="http://placekitten.com/250/250" alt=""> 
 
     </div> 
 
     <div class="testimonial-name-wrapper"><strong>Example Person</strong> 
 
     <br> <span>Nowhere Ville, Alaska</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="spacer">&nbsp;</div> 
 
    <div class="testimonial-content"> 
 
    <div class="left-one-quarter column"> 
 
     <div class="testimonial-image-wrapper"> 
 
     <img src="http://placekitten.com/250/250" alt=""> 
 
     </div> 
 
     <div class="testimonial-name-wrapper"><strong>Example Person</strong> 
 
     <br> <span>Nowhere Ville, Alaska</span> 
 
     </div> 
 
    </div> 
 
    <div class="right-three-quarter column"> 
 
     <div class="bubble-left bubble"> 
 
     <p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent 
 
      pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut 
 
      venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue. 
 
      Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit 
 
      amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum 
 
      lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus 
 
      finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus 
 
      et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat 
 
      vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor. 
 
      Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci 
 
      metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-06-18 Yamaha32088

+0

flexbox可以非常容易地重新排列元素。你可以使用flexbox嗎？ – Martin

+0

@Martin我可能能夠依靠桌面和移動設備上的瀏覽器支持。它看起來像是有非常廣泛的支持http://caniuse.com/#feat=flexbox，所以我可以試試它。對於使用比IE 11更老的東西的人來說，這將是一件好事 – Yamaha32088

回答

2

左側的氣泡，並使其正確的氣泡。

/*new*/ 
 

 
@media (max-width: 979px) { 
 
    .testimonial-content { 
 
    display: flex 
 
    } 
 
    .right-three-quarter { 
 
    order: -1 
 
    } 
 
    .about-wrapper .column { 
 
    align-self: center 
 
    } 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    vertical-align: middle; 
 
    border: 0; 
 
} 
 
.about-wrapper .spacer { 
 
    height: 75px; 
 
} 
 
.about-wrapper h1.customer-testimonial-header { 
 
    text-align: center; 
 
    font-size: 2rem; 
 
    font-weight: 600; 
 
    color: white; 
 
} 
 
.about-wrapper .bubble p { 
 
    font-size: 0.9rem; 
 
} 
 
.about-wrapper .bubble { 
 
    position: relative; 
 
    padding: 35px; 
 
    background: #FFFFFF; 
 
    -webkit-border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
    border-radius: 0px; 
 
    border: #cecece solid 1px; 
 
} 
 
.about-wrapper .bubble:after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 1; 
 
    top: 50%; 
 
    border-color: transparent #FFFFFF; 
 
} 
 
.about-wrapper .bubble:before { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-color: transparent #cecece; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 0; 
 
    top: 50%; 
 
} 
 
.about-wrapper .bubble-left:after { 
 
    border-width: 15px 20px 15px 0; 
 
    left: -19px; 
 
} 
 
.about-wrapper .bubble-left:before { 
 
    border-width: 15px 20px 15px 0; 
 
    left: -21px; 
 
} 
 
.about-wrapper .bubble-right:after { 
 
    border-width: 15px 0px 15px 20px; 
 
    right: -19px; 
 
} 
 
.about-wrapper .bubble-right:before { 
 
    border-width: 15px 0px 15px 20px; 
 
    right: -21px; 
 
} 
 
.about-wrapper .left-one-quarter { 
 
    width: 34%; 
 
    text-align: center; 
 
} 
 
.about-wrapper .right-three-quarter { 
 
    width: 65%; 
 
} 
 
.about-wrapper .right-one-quarter { 
 
    width: 34%; 
 
    text-align: center; 
 
} 
 
.about-wrapper .left-three-quarter { 
 
    width: 65%; 
 
} 
 
.about-wrapper .column { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.about-wrapper .testimonial-text:before { 
 
    content: ' '; 
 
    background: url(/skin/frontend/default/sns_nino/images/icons/quotation-start.png); 
 
    height: 16px; 
 
    width: 20px; 
 
    position: absolute; 
 
    left: 10px; 
 
} 
 
.about-wrapper .testimonial-text:after { 
 
    content: ' '; 
 
    background: url(/skin/frontend/default/sns_nino/images/icons/quotation-end.png); 
 
    height: 16px; 
 
    width: 20px; 
 
    position: absolute; 
 
    right: 10px; 
 
} 
 
.about-wrapper .testimonial-name-wrapper { 
 
    margin-top: 15px; 
 
} 
 
.about-wrapper .about-banner { 
 
    position: relative; 
 
} 
 
.about-wrapper .about-banner .banner-text { 
 
    font-size: 2.3rem; 
 
    position: absolute; 
 
    top: 50%; 
 
} 
 
@media (min-width: 768px) and (max-width: 979px) { 
 
    .about-wrapper .left-one-quarter { 
 
    border-top: 1px solid; 
 
    padding: 20px 0 20px 10px; 
 
    border-bottom: 1px solid; 
 
    float: left; 
 
    width: 100%; 
 
    text-align: left; 
 
    } 
 
    .about-wrapper .right-three-quarter { 
 
    width: 100%; 
 
    } 
 
    .about-wrapper .testimonial-image-wrapper { 
 
    width: 20%; 
 
    display: inline-block; 
 
    } 
 
    .about-wrapper .testimonial-name-wrapper { 
 
    float: none; 
 
    display: inline-block; 
 
    margin-top: 15px; 
 
    } 
 
    .about-wrapper .testimonial-name-wrapper > strong { 
 
    margin-left: 20px; 
 
    vertical-align: middle; 
 
    font-weight: 500; 
 
    font-size: 1.5rem; 
 
    } 
 
    .about-wrapper .testimonial-name-wrapper > span { 
 
    display: none; 
 
    } 
 
    .about-wrapper .bubble-left { 
 
    border: none; 
 
    } 
 
    .about-wrapper .bubble:after, 
 
    .about-wrapper .bubble:before { 
 
    content: none; 
 
    } 
 
    .about-wrapper .testimonial-text:before, 
 
    .about-wrapper .testimonial-text:after { 
 
    content: none; 
 
    } 
 
}
<div class="about-wrapper"> 
 
    <div class="testimonial-content"> 
 
    <div class="left-one-quarter column"> 
 
     <div class="testimonial-image-wrapper"> 
 
     <img src="http://placekitten.com/250/250" alt=""> 
 
     </div> 
 
     <div class="testimonial-name-wrapper"><strong>Example Person</strong> 
 
     <br> <span>Nowhere Ville, Alaska</span> 
 
     </div> 
 
    </div> 
 
    <div class="right-three-quarter column"> 
 
     <div class="bubble-left bubble"> 
 
     <p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent 
 
      pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut 
 
      venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue. 
 
      Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit 
 
      amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum 
 
      lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus 
 
      finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus 
 
      et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat 
 
      vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor. 
 
      Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci 
 
      metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="spacer">&nbsp;</div> 
 
    <div class="testimonial-content"> 
 
    <div class="left-three-quarter column"> 
 
     <div class="bubble-right bubble"> 
 
     <p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent 
 
      pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut 
 
      venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue. 
 
      Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit 
 
      amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum 
 
      lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus 
 
      finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus 
 
      et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat 
 
      vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor. 
 
      Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci 
 
      metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p> 
 
     </div> 
 
    </div> 
 
    <div class="right-one-quarter column"> 
 
     <div class="testimonial-image-wrapper"> 
 
     <img src="http://placekitten.com/250/250" alt=""> 
 
     </div> 
 
     <div class="testimonial-name-wrapper"><strong>Example Person</strong> 
 
     <br> <span>Nowhere Ville, Alaska</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="spacer">&nbsp;</div> 
 
    <div class="testimonial-content"> 
 
    <div class="left-one-quarter column"> 
 
     <div class="testimonial-image-wrapper"> 
 
     <img src="http://placekitten.com/250/250" alt=""> 
 
     </div> 
 
     <div class="testimonial-name-wrapper"><strong>Example Person</strong> 
 
     <br> <span>Nowhere Ville, Alaska</span> 
 
     </div> 
 
    </div> 
 
    <div class="right-three-quarter column"> 
 
     <div class="bubble-left bubble"> 
 
     <p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent 
 
      pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut 
 
      venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue. 
 
      Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit 
 
      amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum 
 
      lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus 
 
      finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus 
 
      et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat 
 
      vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor. 
 
      Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci 
 
      metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-06-18 15:50:56 dippas

1

我建議使用Flex箱這一點，通過dippas作爲回答。

但是，如果你堅持要在不同的順序呈現floats，那麼你需要重新排列HTML DOM其外觀的順序。

坐花車在頁面上出現在它們出現的順序，並符合其他放置規則如float:left或float:right等

所以，如果你想重新排序的浮動件，那麼每一個需要給出一個標籤（可能是一個id標籤），然後爲每個CSS媒體查詢顯示/隱藏您想要以任何特定的屏幕大小顯示哪些浮動框。

您需要在@media基礎聲明中添加大量的display:none/display:block以根據屏幕大小「重新排序」您的浮點數。這會導致一些代碼重複，並增加您的頁面大小...

HTML

<html> 
<body> 
<div id='largeScreen'> 
    <div class='floater'>top content</div> 
    <div class='floater'>middle content</div> 
    <div class='floater'>bottom content</div> 
</div> 
<div id='smallScreen'> 
    <div class='floater'>bottom content</div> 
    <div class='floater'>top content</div> 
    <div class='floater'>middle content</div> 
</div> 
<body> 
</html>

CSS

.floater { 
    float:left; 
    width:49%; 
} 
@media (max-width:600px){ 
    #largeScreen { 
     display:none; 
    } 
    #smallScreen { 
     display:block; 
    } 
} 
@media (min-width:601px){ 
    #largeScreen { 
     display:block; 
    } 
    #smallScreen { 
     display:none; 
    } 
}

但我說這是一個大的代碼負擔和重複的頁面佈局和數據大小完成，並flexbox僅會可用性增加。

另外here is a good guide to starting out with flexbox如果你不習慣它。

來源

2016-06-18 16:01:14 Martin

相關問題

 相關問題