2017-11-03 66 views
0

好的,所以我回来了关于居中我的图像的另一个问题。我收到的任何建议(旧帖子)都没有解决这个问题。授予它,图像不再分散,占用不同的空间。他们在屏幕左侧彼此排列在一起。我有十个图像。我试图通过在两行上方或下方的额外照片实现三行中心图像的两行。我拿出了任何休息元素,因为他们似乎没有做任何事情。一个人如何将图像置于三行中?

div.gallery { 
 
    margin: 5px; 
 
    border: 5px solid white; 
 
    width: 500px; 
 
\t font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace"; 
 
\t color: yellow; 
 
\t \t 
 
    } 
 

 
    div.gallery:hover { 
 
    border: 5px solid yellow; 
 
    } 
 

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

 
    div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
    }
<h1 class="work1"><center><a class="ex1">Photography Assignment</a></center></h1> 
 
\t 
 
\t 
 

 
\t 
 
\t <div class="gallery"> 
 
    \t <a target="_blank" href="images/SS1.png"> 
 
\t \t <img src="images/SS1.png" alt="Margaret's bag" height="200" width="300"> 
 
\t </a> 
 
    \t <div class="desc">An extreme close up of Margaret's bag</div> 
 
\t </div> \t 
 
\t 
 
\t 
 
\t 
 
\t <div class="gallery"> 
 
    \t <a target="_blank" href="images/SS2.png"> 
 
\t \t <img src="images/SS2.png" alt="Margaret's notes" height="200" width="300"> 
 
\t </a> 
 
    \t <div class="desc">A picture of Margaret's bag</div> 
 
\t </div> \t \t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t <div class="gallery"> 
 
    \t <a target="_blank" href="images/SS3.png"> 
 
\t <img src="images/SS3.png" alt="Close up of Margaret's face" height="200" width="300"> 
 
\t </a> 
 
    \t <div class="desc">A close up of Margaret against a pink house</div> 
 
\t </div> \t \t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t <div class="gallery"> 
 
    \t <a target="_blank" href="images/SS4.png"> 
 
\t <img src="images/SS4.png" alt="A medium shot of Margaret" height="200" width="300"> 
 
\t </a> 
 
    \t <div class="desc">A medium shot of Margaret</div> 
 
\t </div> \t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t <div class="gallery"> 
 
    \t <a target="_blank" href="images/SS5.png"> 
 
\t <img src="images/SS5.png" alt="A medium long shot of Margaret" height="200" width="300"> 
 
\t </a> 
 
    \t <div class="desc">A medium long shot of Margaret</div> 
 
\t </div> \t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t <div class="gallery"> 
 
    \t <a target="_blank" href="images/SS6.png"> 
 
\t <img src="images/SS6.png" alt="A long shot of Margaret in motion" height="200" width="300"> 
 
\t </a> 
 
    \t <div class="desc">A long shot of Margaret in motion</div> 
 
\t </div> \t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t <div class="gallery"> 
 
    \t <a target="_blank" href="images/SS7.png"> 
 
\t <img src="images/SS7.png" alt="A upward medium shot of Margaret" height="200" width="300"> 
 
\t </a> 
 
    \t <div class="desc">An upward medium shot of Margaret</div> 
 
\t </div> \t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t <div class="gallery"> 
 
    \t <a target="_blank" href="images/SS8.png"> 
 
\t <img src="images/SS8.png" alt="A telephoto shot of a sunflower with Margaret in the background" height="200" width="300"> 
 
\t </a> 
 
    \t <div class="desc">A telephoto shot of a sunflower with Margaret in the background</div> 
 
\t </div> \t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t <div class="gallery"> 
 
    \t <a target="_blank" href="images/SS9.png"> 
 
\t <img src="images/SS9.png" alt="A telephoto shot of Margaret" height="200" width="300"> 
 
\t </a> 
 
    \t <div class="desc">A telephoto shot of Margaret</div> 
 
\t </div> \t 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t <div class="gallery"> 
 
    \t <a target="_blank" href="images/SS10.png"> 
 
\t <img src="images/SS10.png" alt="A wide shot of Margaret getting into a firetruck" height="200" width="300"> 
 
\t </a> 
 
    \t <div class="desc">A wide shot of Margaret</div> 
 
\t </div> \t 
 
\t 
 

 

 

 

 

+0

'div.gallery {...;显示:inline-block; }' – AlexP

回答

0

我能得到利用Flexbox的这些更新所需的布局:

  1. 添加一个div容器环绕画廊的div的所有10个。

  2. 添加这个CSS新div容器:

    .container { 
        display: flex; 
        flex-direction: row; 
        flex-wrap: wrap; 
        justify-content: space-evenly; 
        align-items: flex-start; 
    } 
    
  3. 添加到CSS width:30%;div.gallery

下面是这些编辑在CodePen: https://codepen.io/jessbodie/pen/OONpRE?editors=1100

参考伟大的文章:“A Complete Guide to Flexbox

+0

@Jack这个或另一个解决方案是否适用于原始问题? – Jess

相关问题