1

Skeleton と Normalize css を使用しています。div コンテナー内で 2 つの画像を縦横に並べて中央揃えにしたいと考えています。ページが狭くなってきたら、以下のように1枚目の画像の下に2枚目の画像が欲しい

Normal width:
img1 img2

Narrow view:
img1
img2

これが私のコードです：

<div id="center">
    <div class="left">
        <img class="u-max-full-width" src="img1.jpg">
    </div>        
    <div class="right">
        <img class="u-max-full-width" src="img2.jpg">
    </div>
</div>

そして、ここに私のcssがあります：

#center {
    width: 100%;
    text-align: center;
    position: relative;
    display: table;
}
#center > div {
    display: table-cell;
    vertical-align: middle;
}

.left {
    width: 50%;
    height: 100%;
    text-align: center;
}

.right {
    width: 50%;
    height: 100%;
    text-align: center;
}

このコードでは、通常の幅で垂直方向に中央揃えされますが、狭いビューでは画像を互いに下に揃えることができません。これを行う方法についてのアイデアはありますか？

4

2 に答える 2

1

これを試して：

.container {
  text-align: center;
  
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex;
  display: flex;
  
  justify-content: center;
  flex-wrap: wrap;

  -webkit-box-align: center;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  height: 800px;
}
<div class='container'>

   <img src="//placehold.it/300x300" class="thumbnail" alt="">
   
   <img src="//placehold.it/300x300" class="thumbnail" alt="">

</div>

編集: Sry は適切に読み取れませんでした..ページが狭くなっても、これらは分割されません。

François が指摘したように、これを css に追加します。

flex-wrap: wrap;

別の編集: どうやら IE にはこれに関するいくつかの問題があります。.container (container_wrapper) などのラッパーを作成します。それを与える：

display: flex;
flex-direction: column;
height: 100%;

そして、あなたのhtmlと本文が100％の高さに設定されていることを確認してください

于 2016-09-14T11:55:30.573 に答える
0

Jip van Kakerken のコードでは、プロパティを追加するだけです:

flex-wrap: wrap;


.container {
  text-align:           center;
  
  display: 				-webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: 				-moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: 				-ms-flexbox; /* TWEENER - IE 10 */
  display: 				-webkit-flex;
  display: 				flex;
  
  justify-content:      center;

  -webkit-box-align: 	center;
  -webkit-flex-align: 	center;
  -ms-flex-align: 		center;
  -webkit-align-items: 	center;
  align-items: 			center;
  flex-wrap:            wrap;

  height:               800px;
}
<div class='container'>

   <img src="//placehold.it/300x300" class="thumbnail" alt="">
   
   <img src="//placehold.it/300x300" class="thumbnail" alt="">

</div>

于 2016-09-14T12:09:40.460 に答える