携帯端末用のコンテナの再配置

デスクトップフレンドリーなサイトをモバイルフレンドリーにしたいと考えています。携帯端末用のコンテナの再配置

Thisは、モバイルデバイスの検索方法です。

This私はモバイルユーザーを探す方法です。

このレイアウトの背景にある理由は、1行に2つの列があるデスクトップ上で見栄えが良いということです。

HTMLコード：

<html> 
<div class="outer-container"> 
    <div class="inner-container">text</div> 
    <div class="inner-container">img</div> 
</div> 
<div class="outer-container"> 
    <div class="inner-container">img</div> 
    <div class="inner-container">text</div> 
</div> 
<div class="outer-container"> 
    <div class="inner-container">text</div> 
    <div class="inner-container">img</div> 
</div> 
</html>

CSSコード：

.outer-container{ 
    width:100%; 
} 

.inner-container{ 
    float:left; 
    width:50%; 
} 

@media screen and (max-width:480px){ 
    .inner-container{ 
    width:100%; 
    } 
}

出典

2017-07-18 Erik Werkelin

あなたがこれを行うにはflexを使用することができます。 columnを作成し、子どものorder属性を使用して、適切に再構成します。

.outer-container{ 
 
    width:100%; 
 

 
} 
 

 
.inner-container{ 
 
    float:left; 
 
    width:50%; 
 
} 
 

 
@media screen and (max-width:480px){ 
 
    .inner-container{ 
 
    width:100%; 
 
    } 
 
    .outer-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    .t { 
 
    order: -1; 
 
    } 
 
}

<html> 
 
<div class="outer-container"> 
 
    <div class="inner-container t">text</div> 
 
    <div class="inner-container i">img</div> 
 
</div> 
 
<div class="outer-container"> 
 
    <div class="inner-container i">img</div> 
 
    <div class="inner-container t">text</div> 
 
</div> 
 
<div class="outer-container"> 
 
    <div class="inner-container t">text</div> 
 
    <div class="inner-container i">img</div> 
 
</div> 
 
</html>

出典

2017-07-18 23:17:01

携帯端末用のコンテナの再配置

答えて

関連する問題