CSS - 複数行折り返し

Question

もしあなたが次の問題に関していくつかのガイダンスを持っておきたいなら、助けてください。

イメージの説明にテキストが多すぎると、基本的にイメージがプッシュアップされます。そのような問題に対処する最も魅力的な方法は何でしょうか？

ありがとうございました。

は、私は基本的なフィドル作成 - あなたは、CSSの一部以下同じアプローチの更新のための flexを使用することができますインライン

JSFiddle

div.gallery { 
    border: 1px solid #ccc; 
} 

div.gallery:hover { 
    border: 1px solid #777; 
} 

div.gallery img { 
    width: 30%; 
    height: auto; 
} 

div.desc { 
    padding: 15px; 
    text-align: center; 
} 

* { 
    box-sizing: border-box; 
} 

.responsive { 
    padding: 0 6px; 
    display: inline-block; 
    width: 15.99999%; 
} 

@media only screen and (max-width: 700px){ 
    .responsive { 
     width: 49.99999%; 
     margin: 6px 0; 
    } 
} 

@media only screen and (max-width: 500px){ 
    .responsive { 
     width: 100%; 
    } 
} 

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Answer 1

をスニペットは、私が決めたフレックスソリューションがあろうと本当にここで私を助けてください。

私は、次のCSSコード作成：HTMLは非常に自明です

.file-wrapper { 
    flex-direction: row; 
    flex-flow: row wrap; 
    justify-content: center; 
    display: flex; 
} 
.file-image { 
    padding: 30px; 
} 

.file-box { 
    text-align: center; 
    padding: 1em; 
    flex-basis: 10em; 
    margin: 1em; 
} 

.fileTextWrapper { 
    display: table; 
    width: 100%; 
    height: 3em; 
} 
.file-text { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    width: 100%; 
} 

を。ラッパーにはすべての要素が含まれています。次に、魔法使いとその説明のためのdivを持っています。これを行うことによって応答性が高いだけでなく、中心に揃えられ、テキストがうまく包まれます。

Answer 2

をそれらを得るためにウィンドウを再サイズを

Update code

div.gallery { 
    border: 1px solid #ccc; 
    display:flex; 
    justify-content:center; 
    flex-flow:column nowrap; 
    align-items:center; 
    padding:10px; 
} 

    div.gallery img { 
    /* width: 30%; */ 
    height: auto; 
} 

div.gallery { 
 
    border: 1px solid #ccc; 
 
    display:flex; 
 
    justify-content:center; 
 
    flex-flow:column nowrap; 
 
    align-items:center; 
 
    padding:10px; 
 
} 
 
div.gallery:hover { 
 
    border: 1px solid #777; 
 
} 
 

 
div.gallery img { 
 
    /* width: 30%; */ 
 
    height: auto; 
 
} 
 

 
div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
.responsive { 
 
    padding: 0 6px; 
 
    display: inline-block; 
 
    width: 15.99999%; 
 
} 
 

 
@media only screen and (max-width: 700px){ 
 
    .responsive { 
 
     width: 49.99999%; 
 
     margin: 6px 0; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 500px){ 
 
    .responsive { 
 
     width: 100%; 
 
    } 
 
} 
 

 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

  
 
      
 
      <div class="responsive"> 
 
       <div class="gallery"> 
 
         <img src="{{ asset('/img/zip.svg')}}"/> 
 
        <div class="desc">Description</div> 
 
       </div> 
 
     </div> 
 
     
 
       <div class="responsive"> 
 
       <div class="gallery"> 
 
         <img src="{{ asset('/img/zip.svg')}}"/> 
 
        <div class="desc">Description Description</div> 
 
       </div> 
 
     </div> 
 
     
 
       <div class="responsive"> 
 
       <div class="gallery"> 
 
         <img src="{{ asset('/img/zip.svg')}}"/> 
 
        <div class="desc">Description Description Description Description Description Description</div> 
 
       </div> 
 
     </div> 
 
     
 
    

Answer 3

私はこのような何かをするだろう：

div.gallery { 
    border: 1px solid #ccc; 
    min-height: 200px; 
} 

これは、すべてのボックスが同じになるだろう。

Answer 4

あなたは、あなたの.responsiveのdivにvertical-align: top;を追加することができますので、すべてのdivの上から配置されます。.. チェックは以下の将来の人々のために

div.gallery { 
 
    border: 1px solid #ccc; 
 
} 
 

 
div.gallery:hover { 
 
    border: 1px solid #777; 
 
} 
 

 
div.gallery img { 
 
    width: 30%; 
 
    height: auto; 
 
} 
 

 
div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
.responsive { 
 
    padding: 0 6px; 
 
    display: inline-block; 
 
    width: 15.99999%; 
 
    vertical-align: top; 
 
} 
 

 
@media only screen and (max-width: 700px){ 
 
    .responsive { 
 
     width: 49.99999%; 
 
     margin: 6px 0; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 500px){ 
 
    .responsive { 
 
     width: 100%; 
 
    } 
 
} 
 

 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

  
 
      
 
<div class="responsive"> 
 
    <div class="gallery"> 
 
     <img src="{{ asset('/img/zip.svg')}}" /> 
 
     <div class="desc">Description</div> 
 
    </div> 
 
</div> 
 

 
<div class="responsive"> 
 
    <div class="gallery"> 
 
     <img src="{{ asset('/img/zip.svg')}}" /> 
 
     <div class="desc">Description Description</div> 
 
    </div> 
 
</div> 
 

 
<div class="responsive"> 
 
    <div class="gallery"> 
 
     <img src="{{ asset('/img/zip.svg')}}" /> 
 
     <div class="desc">Description Description Description Description Description Description</div> 
 
    </div> 
 
</div> 
 
     
 
    

Answer 5

魅力的な解決策が何を意味しているか、まだ提案されていないという考え方に応じて、テキストオーバーフロー省略記号を使用できます。

div.desc { 
    padding: 15px; 
    text-align: center; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
}