レスポンスグリッドを中央に揃える方法

イメージのグリッド（すべて300px×300px）のページを作成しようとしています。サイズ変更時：画像サイズは変更されませんが、各行の余分な画像は下の行にドロップされます。 https://jsfiddle.net/xixi/w4xx9y33/レスポンスグリッドを中央に揃える方法

それはほとんどが正常に動作しているが、私は本当にすべての時間を中心にグリッドをしたいと思い、代わりのアライン左：私はJSFiddleに今持っている何

。 Pinterest.comのピングリッドのように

ご協力いただきありがとうございます！

<body> 
    <div class="grid"> 
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div> 
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div> 
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div> 
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div> 
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div> 
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div> 
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div> 
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div> 
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div> 
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div> 
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div> 
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div> 
    </div> 
</body>

出典

2016-04-20 DJ.S

これを試してみてください：それはあるよう

.grid_item { 
    @include rowMachine(1, 10%); 
    display: inline-block; 
    background: none; 
    padding: 10px; 
    position: relative; 

    @media (min-width: 500px) { 
     @include rowMachine(2, 5%); 
     float: left; 
    } 
...

は休息を残します。

注：IE7サポートが必要な場合は、ブロックのインラインブロックに問題がある可能性があります。

出典

2016-04-20 03:37:12

こんにちは、私は試してみましたが、うまくいきませんでした。:( –

ここに中心が置かれているようです：https://jsfiddle.net/w4xx9y33/4/ それ以外の場合は、ブートストラップまたはファンデーション。レスポンスグリッドを簡単に管理できます。http://foundation.zurb.com/sites/docs/grid.html –

ありがとうございました！ –

おそらく、あなたが望むものを達成するためにフレックスボックス技術を使用します。

以下のリファレンスページをチェックしてください

http://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/

https://css-tricks.com/seamless-responsive-photo-grid/

出典

2016-04-20 03:32:27 nzkks

こんにちはShanthoshK、両方の例では、画像はウィンドウのサイズが変更されるとサイズが変更されます。これは私が探している動作ではありません。どちらの例でも、グリッドは中央に配置されています。それらは両方とも左揃えです。 –

BootstrapとZurb Foundationの両方の最新バージョンはFlexBox技術を使用しています。小さな必要性のためにCSSフレームワークを避けるために、新興のシンプルなCSSテクニックを提案しました。それはあなた次第です。 – nzkks

レスポンスグリッドを中央に揃える方法

答えて

関連する問題