0

私はこのテンプレートを使用しています: http://fluidbaselinegrid.com/流動的なグリッドを作成して私の個人的なサイトをレイアウトします。すべてのグリッドが高さであるとは限らず、間違った配置になることがあります。 スクリーンショット[1]。

スキル セクションはブログ投稿 5 の下の左側にあり、連絡先はスキルの隣にあります。

私のサイトhttp://vsrao.com.s3-website-us-east-1.amazonaws.comをご覧ください。そして、そこにある css と html にアクセスできるはずです。この投稿に貼り付けるには長すぎます。これが悪いエチケットであるかどうか教えてください。また、最新のより優れた流動グリッド フレームワークがあれば教えてください。

4

1 に答える 1

1

列の nth-child セレクターを介して clear: left を適用することで、おそらくこれに取り組むことができます。メディア クエリを使用すると、次のように 2 列または 3 列のレイアウトを模倣できるはずです。

// 2 column layout
@media only screen and (max-width: 767px) {
  .g1:nth-child(2n+1) {
    clear: left;
  }
}

// 3 column layout
@media only screen and (min-width: 768px) {
 .g1:nth-child(3n+1) {
        clear: left;
      }
}

注: 新しいメディア クエリ (最大幅: 767 ピクセル) を追加して、2 列レイアウトのクリアが小さい画面ビューにのみ適用されるようにする必要があります。

于 2013-02-19T21:18:44.513 に答える