レスポンシブ2カラムディビジョンが動作しない

レスピシブ2カラムディビジョンを試しましたが、動作していません。私が試したものには、いくつかのリンクが含まれています。なぜ彼らは働いていないのか？私たちは、画面が小さくなったときに積み重なるdivsを作成したいだけです。前もって感謝します！またレスポンシブ2カラムディビジョンが動作しない

http://jsfiddle.net/fkp8d/1/

<div class="group"> 
<div class="left"> 
    <p>tates enim officiis. Iste repudiandae illo nulla sed nam a ratione iure?</p> 
</div> 
    <div class="right"> 
    <img src="http://lorempixel.com/640/480/" alt="" /> 
    </div> 
</div> 

<style> 
.left { 
    float: left; 
    width: 50%; 
} 
.right { 
    float: right; 
    width: 50%; 
} 
img { 
    max-width: 100%; 
    height: auto; 
} 
.group:after { 
    content:""; 
    display: table; 
    clear: both; 
} 
@media screen and (max-width: 480px) { 
    .left, .right { 
     float: none; 
     width: auto; 
    } 
    } </style>

： http://jsfiddle.net/8YLXy/

出典

2016-06-26 H.I

最初のフィドル作品は何ですか？それは単純化することができますが – dippas

はい、あなたの最初のフィドルは働いています –

あなたの最初のフィドルが正常に動作し、あなた秒OND私は

.container { 
 
    position: relative; 
 
} 
 
.sidebar { 
 
    float: right; 
 
    width: 250px; 
 
} 
 
.main-area { 
 
    background: red; 
 
    margin-right: 250px; 
 
} 
 

 
@media screen and (max-width: 480px) { 
 
    .sidebar { 
 
    float: none; 
 
    width: auto; 
 
    } 
 
    .main-area { 
 
    margin-right: 0; 
 
    } 
 
}

<div class="container"> 
 
    <div class="sidebar">sidebar</div> 
 
    <div class="main-area">main content</div> 
 
</div>

（ float: rightが最初にする必要が）代わりに、絶対位置決め、サイドバーを浮かべ、マークアップで子供を切り替えここでは、この

Updated fiddle

に、調整が必要

出典

2016-06-26 17:07:07 LGSon

これはまだ私にとってはうまくいきませんでした。なぜどんなアイデア？返信いただきありがとうございます！ –

@ H.I：どうしてうまくいかないのですか？上記のスニペットやフィドルをテストしたり、独自の更新コードを実行したりしましたか？どのブラウザを使用していますか？ – LGSon

これはブラウザでは機能しますが、自分のサイトに追加すると空白のHTMLページにはなりません。私はCSSやJSを追加しませんでした。何か案は？ありがとう！ –

はそれを試してみてください。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <style> 
 
      .left { 
 
    float: left; 
 
    width: 50%; 
 
} 
 
.right { 
 
    float: right; 
 
    width: 50%; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
.group:after { 
 
    content:""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
@media screen and (max-width: 480px) { 
 
    .left, .right { 
 
     float: none; 
 
     width: auto; 
 
    } 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div class="group"> 
 
      <div class="left"> 
 
       <p>tates enim officiis. Iste repudiandae illo nulla sed nam a ratione iure?</p> 
 
      </div> 
 
       <div class="right"> 
 
       <img src="http://lorempixel.com/640/480/" alt="" /> 
 
       </div> 
 
     </div> 
 
    </body> 
 
</html>

出典

2016-06-26 16:47:22 Ehsan

返信ありがとう！これはまだ私のためには機能しません。なぜどんなアイデア？ –

実行コードのスニペットをクリックしてブラウザのサイズを変更すると、その機能は動作しますか？ – Ehsan

これはブラウザでは機能しますが、私のサイトには空白のHTMLページだけを追加しても機能しません。私はCSSやJSを追加しませんでした。何か案は？ありがとう！ –

レスポンシブ2カラムディビジョンが動作しない

答えて

関連する問題