フレックスギャラリーは意図したとおりに動作しません

-1

フレックスコンテナにはさまざまなイメージが含まれていますが、行ごとに4つのimgが含まれていますが、現在は3つ表示されています（flexと一緒にflexプロパティを使用して、右余白flex：0 0 calc（25％〜10px）;）。フレックスギャラリーは意図したとおりに動作しません

だから、問題は次のとおりである：あなたが意味このような3つの代わりに、列ごとに4枚の画像

.photogallery{ 
 
\t width:40%; 
 
\t height:100%; 
 
\t position:relative; 
 
\t display:flex; 
 
\t flex-wrap:wrap; 
 
\t justify-content:flex-start; 
 
\t align-content:flex-start; 
 
\t overflow:auto; 
 
} 
 

 
.photogallery img{ 
 
\t outline:1px solid rgba(0,0, 0, 0.6); 
 
\t height:14%; 
 
\t flex:0 0 calc(25% - 12px); 
 
\t margin-left:5px; 
 
\t margin-right:5px; 
 
\t margin-bottom:10px; 
 
\t cursor:pointer; 
 
} 
 

 
.photogallery__image::before{ 
 
\t content:""; 
 
\t width:calc(25% - 10px); 
 
\t height:14%; 
 
\t background-color: yellow; 
 
\t border:1px solid red; 
 
\t z-index:100000; 
 
\t position:absolute; 
 
\t top:0px; 
 
\t left:calc(25% - 10px);; 
 
}

<div style="width:100%; height:100vh; position:absolute; top:0px; left:0px; background-color:rgba(0, 0, 0, 0.8); padding:2%; z-index:10000; display:flex; align-items:center; flex-flow:row-reverse;" > 
 
    <div style="width:1150px; height:580px; ; flex:0 0 auto; margin-right:10px; display:flex; flex-flow:row; flex-wrap:wrap; justify-content:flex-start;"> 
 
    <div style="width:60%; height:100%; position:relative; display:flex;"> 
 
\t <img class="" src="" style="width:400px; height:300px; margin:auto;"> 
 
\t </div> 
 
\t <div class="photogallery" style=""> 
 
\t <img class="photogallery__image" src="images/20170419_020725.jpg" style=""> 
 
\t <img class="photogallery__image" src="images/20170519_162807.jpg" style=""> 
 
\t <img class="photogallery__image" src="images/20170520_115845.jpg" style=""> 
 
\t <img class="photogallery__image" src="images/20170520_115819.jpg" style=""> 
 
\t <img class="photogallery__image" src="images/20170520_121454.jpg" style=""> 
 
\t <img class="photogallery__image" src="images/20170521_030407.jpg" style=""> 
 
\t <img class="photogallery__image" src="images/20170522_112958.jpg" style=""> 
 
\t <img class="photogallery__image" src="images/20170522_124602.jpg" style=""> 
 
\t <img class="photogallery__image" src="images/20170705_184344.jpg" style=""> 
 
\t <img class="photogallery__image" src="images/20170806_224148.jpg" style=""> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-11-16 gabogabans

他は突然無効になりました。私たちが提案した解決策は、質問の更新コードに組み込まれました。すべての答えは何も追加しないので、奇妙に見えます。最初の版にロールバックし、コードの更新のために、最初の_wrong_の値を保持してください。そうしないと、指定された回答を削除できます。 – LGSon

追加された擬似問題については、この質問からも削除し、新しいものを作成してその援助を受けてください。 – LGSon

私はあなたが '' img'で ':: before'を使っていることに気付きました。擬似要素は 'img'、' input'などのような単一のタグ要素では機能しません（Chromeはそれをやろうとします）。そのためには、それぞれの 'img'をラップする必要があります。この質問で使用されているもの以外のセットアップが必要になります。 – LGSon

何かを表示

1）Flexコンテナ？

<style> 
    * { 
    box-sizing: border-box; 
    } 
    .photogallery { 
    width: 400px; 
    height: 100%; 
    display:flex; 
    align-items:flex-start; 
    flex-wrap:wrap; 
    justify-content:flex-start; 
    } 
    .photogallery img { 
    padding: 5px; 
    width:25%; 
    } 
</style> 
</head> 

<body> 
    <div class="photogallery"> 
     <img src="http://placehold.it/400x200"> 
     <img src="http://placehold.it/400x200"> 
     <img src="http://placehold.it/400x200"> 
     <img src="http://placehold.it/400x200"> 
     <img src="http://placehold.it/400x200"> 
     <img src="http://placehold.it/400x200"> 
     <img src="http://placehold.it/400x200"> 
     <img src="http://placehold.it/400x200"> 
     <img src="http://placehold.it/400x200"> 
     <img src="http://placehold.it/400x200"> 
    </div> 
</body>

出典

2017-11-16 14:03:19 user1141796

ちょうどあなたのCSSに

* { 
    box-sizing: border-box; 
    }

を追加します。各要素の周りに設定した境界のために、3行しか表示されません。私の場合、行の間に10pxがあります。

画像の代わりに、 flexパラメータ（2×5pxのマージン、2×1ピクセル境界のための）上の

出典

2017-11-16 14:05:48

私は* box-sizingを持っています：リンクされたスタイルシートのborder-box – gabogabans

使用width: calc(25% - 12px);：その更新私の答え、そして男と

.photogallery { 
 
    width: 40%; 
 
    height: 100%; 
 
    position: relative; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-items: flex-start; 
 
    overflow: auto; 
 
} 
 

 
.photogallery>img { 
 
    border: 1px solid rgba(0, 0, 0, 0.6); 
 
    height: 14%; 
 
    width: calc(25% - 12px); 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
    margin-bottom: 10px; 
 
}

<div class="photogallery"> 
 
    <img src="images/20170419_020725.jpg"> 
 
    <img src="images/20170519_162807.jpg"> 
 
    <img src="images/20170520_115845.jpg"> 
 
    <img src="images/20170520_115819.jpg"> 
 
    <img src="images/20170520_121454.jpg"> 
 
    <img src="images/20170521_030407.jpg"> 
 
    <img src="images/20170522_112958.jpg"> 
 
    <img src="images/20170522_124602.jpg"> 
 
    <img src="images/20170705_184344.jpg"> 
 
    <img src="images/20170806_224148.jpg"> 
 
</div>

出典

2017-11-16 14:19:43 Johannes

フレックスギャラリーは意図したとおりに動作しません

答えて

関連する問題