css - レスポンシブなパーセンテージ ベースのレイアウトで DIV を分離する

Question

これまでのところ、私はこのJsFiddleを持っています- 領域の幅が縮小し、コンテナ幅の 100% に収まるレイアウトを維持するにつれて、メディアクエリを使用する DIV の配置が変化します。

私が抱えている問題はDIV、レイアウトがパーセンテージベースであるため、を分離しようとしていることです。

マージンを含めようとする私の努力は、これまでのところ、すべてを完全にフォーマットされた状態に保つことに失敗しています。

ここで何か助けていただければ幸いです。

これがCSSです...

#photos {
   /* Prevent vertical gaps */
   line-height: 0;
   width: 100%;
}
#photos img {
  /* Just in case there are inline attributes */
  width: 20%;
  height: auto;
  float:left;
  overflow:hidden;
}

@media (max-width: 1200px) {
    #photos img {
    /* Just in case there are inline attributes */
    width: 20%;
    }
}

@media (max-width: 800px) {
    #photos img {
    /* Just in case there are inline attributes */
    width: 25%;
    }
}
@media (max-width: 400px) {
    #photos img {
    /* Just in case there are inline attributes */
    width: 50%;
    }
}
@media (max-width: 300px) {
    #photos img {
    /* Just in case there are inline attributes */
    width: 100%;
    }
}