レスポンシブ・イメージ・ギャラリーの作成

私はモバイルでInstagramなどの反応的なイメージ・ギャラリーを作成しようとしています。左右から余白無しに、幅3枚の画像が欲しい。どうすればこれを達成できますか？ここでレスポンシブ・イメージ・ギャラリーの作成

は、私がこれまで持っているものです。

@media (max-width: 480px) { 
 
    .portfolio-list li { 
 
     width:33.3333%; 
 
     height: 100px; 
 
     border: 3px solid white; 
 
     margin: -3px; 
 
    } 
 

 
    .portfolio-container, 
 
    .portfolio-list { 
 
     margin-right: 0 ; 
 
     margin-left:0; 
 
     margin-top:10px; 
 
    } 
 

 
    .portfolio-list { 
 
     width: 100%; 
 
    } 
 
} 
 

 
portfolio-list { 
 
    list-style: none; 
 
} 
 

 
.portfolio-list li { 
 
    position: relative; 
 
    display: block; 
 
    float: left; 
 
} 
 

 
.portfolio-list li img { 
 
    display: block; 
 
    width: 100%; 
 
    margin:0; 
 
    vertical-align: top; 
 
    height: 100%; 
 
}

<container class="portfolio-container text-center"> 
 
    <ul class="portfolio-list" style="margin:0 auto"> 
 
     <li style="margin:0 auto"> 
 
      <a href="#"><img src="{{$img['image']}}"></a> 
 
     </li> 
 
    </ul> 
 
</container>

私が持っているギャラリーのイメージがある：

出典

2017-07-27 Honey

あなたはブートストラップを使用することはできますか？これは、デフォルトであなたのためにすべての世話をするでしょう –

私に教えてくださいどこで自分のコードでブートストラップを使用するのですか？ – Honey

http://getbootstrap.com/getting-started/、HTMLをセットアップする：http://getbootstrap.com/css/#images –

編集：デスクトップビューも追加されました。

常にメディアクエストを最後に置いてください。そうでない場合は、次のセレクタによってオーバーライドされます。
メディア以外のクエリ.portofolio-listをflexboxに切り替えました。
portfolio-listにはドットがありません。ここではlist-style: noneです。

基本的に私は次のように追加しました：

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

ブラウザのマージンをリセットするにして崩壊からの箱を防ぐために。

.portfolio-list liのmargin: -3px;にコメントして正確なセンタリングを壊さないようにします。モバイルビューに

https://jsfiddle.net/ujrruyxq/7/

画像：

デスクトップビュー：

出典

2017-07-27 15:51:51 Syden

あなたに問題がありますコードサンプル、</style>終了タグがありません。また、このタグは、HTML5文書のルートタグである<html>より前です。既に存在しているものを再作成する役に立たないので

は、あなたの質問に答えるために、私は第二ので、あなたがグリッドをほとんど必要があります、まず、この問題を解決するためにGrilladeのように、応答CSSグリッドを使用しますどこでもアプリケーションで！

出典

2017-07-27 15:18:19 Gramatiik

レスポンシブ・イメージ・ギャラリーの作成

答えて

関連する問題