sub ulがメインulに垂直にインラインで表示するCSS

Question

レイアウトのテストをしていますが、レイアウトの下にファイルの詳細が表示されます。

私は、リスト項目でulタグを使用するようにhtmlとcssをセットアップしました。これは次のように表示されます

イメージの左端とファイルの見出しが整列したイメージの下に表示するには、ファイルのプロパティ（今のところ私は3つ使用しましたが、それ以上のものもあります）が必要です。私はイメージの下にそれらを取得し、整列しているようだ。多くは試みますが、彼らは常にイメージの右にあるようです。

div { 
 
    width: 660px; 
 
    margin: 0 auto; 
 
    overflow: auto; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
} 
 

 
li ul { 
 
    display: block; 
 
} 
 

 
li ul li { 
 
    display: block; 
 
} 
 

 
li img { 
 
    float: left; 
 
    margin: 5px; 
 
    border: 5px solid #333; 
 
} 
 

 
li img:hover { 
 
    border: 5px solid lightblue; 
 
}

<div class="row"> 
 
    <div> 
 
    <ul> 
 
     <li> 
 
     <a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a> 
 

 
     <ul> 
 
      <li><b>File:</b> DeWalt_GE_FullView.jpg</li> 
 
      <li><b>Size:</b> 43,657 bytes</li> 
 
      <li><b>Type:</b> image/jpeg</li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a> 
 
     </li> 
 
     <li> 
 
     <a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a> 
 
     </li> 
 
     <li> 
 
     <a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a> 
 
     </li> 
 

 
    </ul> 
 
    </div> 
 
</div>

Answer 1

私はそれは李さんとULのとそれほど混乱はありませんので、あなたのコードを再構築、山車を取り払う提案し、その後、フレキシボックスを使用してみます：

.wrapper { 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
\t width: 600px; 
 
\t margin: 0 auto; 
 
\t overflow: auto; 
 
} 
 

 
.file-box { 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t align-items: center; 
 
} 
 

 

 
.file-box img { 
 
    margin: 5px; 
 
    border: 5px solid #333; 
 
} 
 

 
.file-box img:hover { 
 
    border: 5px solid lightblue; 
 
} 
 

 

 
.file-details p { 
 
    margin: 0; 
 
}

<div class="wrapper"> 
 
\t <div class="file-box"> 
 
\t \t <a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a> 
 
\t \t <div class="file-details"> 
 
\t \t \t <p>File: DeWalt_GE_FullView.jpg</p> 
 
\t \t \t <p>Size: 43,657 bytes</p> 
 
\t \t \t <p>Type: image/jpeg</p> 
 
\t \t </div> 
 
\t </div> 
 
\t \t <div class="file-box"> 
 
\t \t <a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a> 
 
\t \t <div class="file-details"> 
 
\t \t \t <p>File: DeWalt_GE_FullView2.jpg</p> 
 
\t \t \t <p>Size: 44,657 bytes</p> 
 
\t \t \t <p>Type: image/jpeg</p> 
 
\t \t </div> 
 
\t </div> 
 
\t \t <div class="file-box"> 
 
\t \t <a href="#"><img src="http://s17.postimg.org/xixeyesbz/image_grid.png"></a> 
 
\t \t <div class="file-details"> 
 
\t \t \t <p>File: DeWalt_GE_FullView3.jpg</p> 
 
\t \t \t <p>Size: 45,657 bytes</p> 
 
\t \t \t <p>Type: image/jpeg</p> 
 
\t \t </div> 
 
\t </div> 
 
</div>