1. ホーム
  2. 質問と答え
  3. 画面サイズに基づいてフローティング要素を並べ替えるCSS

画面サイズに基づいてフローティング要素を並べ替えるCSS

2016-06-18 7 views
0

私がする必要があるのは、デスクトップ上での視覚的な推薦のセットを表示し、スクリーンが979pxの垂直型のレイアウトに切り替わるときです。その人物の画像と名前は、ヘッダーの上に、そしてその下にある説明テキストが、その下に表示されます。画面サイズに基づいてフローティング要素を並べ替えるCSS

私はfiddle hereを含んでいます。ビューポートが広いときは、ずらしたレイアウトがありますが、縮小するとレイアウトが、画像が左側にある証言用のより垂直なレイアウトに切り替わります。

私が必要とするのは、画像が右側にあり、画像が左側にある声明のように見える証言です。私がこれを行うことができた唯一の方法は、イメージラッパーをテキストラッパーの上に置き、イメージラッパーを右に浮かべるように、右のイメージを使って推薦の順序を変更することです。この問題は、inline-block要素のvertical-align: middleが破損していることが原因です。

純粋なCSSを使用して私の縦型レイアウトの目標を達成する別の方法があるのでしょうか？私は簡単にJavascriptでそれを行うことができますが、私がする必要がない場合は、それを使用しないことを好むでしょう。ここで

が私のコードです：あなたはorderを使用してこれを達成することができます（IE10 +での部分的なサポートを持っている）

flexboxを使用して 

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

フレキシボックスは非常に簡単に要素を並べ替えることができます。フレックスボックスは使えますか？ – Martin

+0

@Martinデスクトップとモバイルのブラウザサポートに依存する可能性があります。かなり広いサポートhttp://caniuse.com/#feat=flexboxがあるようですので、私はそれが私が推測するショットを与えることができます。 IE 11より古いものを使用している人には代替手段を用意することはいいことです – Yamaha32088

答えて

2

とalign-self

あなただけの世話をする必要があり左の泡の右の泡を作ります。

/*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

私はdippasによって答えとして、このためにフレックスボックスを使用することをお勧めします。

あなたは異なる順序でfloatsを提示したいと主張する場合は、あなたがHTML DOMで、その外観の順序を変更する必要があります。

山車あなたのフローティングユニットの順序を変更したいのであれば、各1は、タグを与える必要がある、彼らが表示される順序で表示され、などなど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

関連する問題

 関連する問題