当我在display flex中添加指向图像的链接时，它会破坏布局

So I have some images laid with display: flex like this:

所以我有一些图像放置显示:flex像这样:

<img id = "vidmenu1" src = "http://img.youtube.com/vi/EmoSTXvo0NU/0.jpg" width = "50%" />
<img id = "vidmenu3" src = "http://img.youtube.com/vi/h0Nj8sVV7g0/0.jpg" width = "50%" />
<br style="clear:both" />                       
<img id = "vidmenu2" src = "http://img.youtube.com/vi/ohuuLmwER0A/0.jpg" width = "50%" />
<img id = "vidmenu4" src = "http://img.youtube.com/vi/mcWhnMmlNFE/0.jpg" width = "50%" />

Using the css code:

使用css代码:

#parent_div {   display: -webkit-flex;
-webkit-box-direction: normal;
-webkit-box-align:stretch;
display: flex; 
width: 100%;
flex-direction: row; 
flex-wrap: wrap; 
justify-content:space-around; 
width: 70%; 
border: 0; 
margin: 0; 
padding: 0 }
#vidmenu1 {display: -webkit-flex;
-webkit-box-direction: normal;
-webkit-box-align:stretch;
display: flex;  height: 50%; border: 0; margin: 0; padding: 0}
#vidmenu2 {display: -webkit-flex;
-webkit-box-direction: normal;
-webkit-box-align:stretch;
display: flex;  height: 50%; border: 0; margin: 0; padding: 0}
#vidmenu3 {display: -webkit-flex;
-webkit-box-direction: normal;
-webkit-box-align:stretch;
display: flex;  height: 50%; border: 0; margin: 0; padding: 0}
#vidmenu4 {display: -webkit-flex;
-webkit-box-direction: normal;
-webkit-box-align:stretch;
display: flex;  height: 50%; border: 0; margin: 0; padding: 0}

and it displays exactly like I want, which is in a two-by-two square. But when I add links to the images, like this:

它显示的确与我想要的完全一样,是2×2的正方形。但是当我添加链接到图像时,像这样:

<a target = "vid_menu" href = "//www.youtube.com/embed/ohuuLmwER0A?list=PLAg45-Ox3WR4gODmcAmIYHVvCpngXcCTZ&amp;index=1&amp;controls=0&amp;showinfo=0">
    <img id = "vidmenu1" src = "http://img.youtube.com/vi/EmoSTXvo0NU/0.jpg" width = "50%" />
</a>
<a target = "vid_menu" href = "//www.youtube.com/embed/ohuuLmwER0A?list=PLAg45-Ox3WR4gODmcAmIYHVvCpngXcCTZ&amp;index=1&amp;controls=0&amp;showinfo=0">
    <img id = "vidmenu3" src = "http://img.youtube.com/vi/h0Nj8sVV7g0/0.jpg" width = "50%" />
</a>
<br style="clear:both" />                       
<a target = "vid_menu" href = "//www.youtube.com/embed/ohuuLmwER0A?list=PLAg45-Ox3WR4gODmcAmIYHVvCpngXcCTZ&amp;index=1&amp;controls=0&amp;showinfo=0">
    <img id = "vidmenu2" src = "http://img.youtube.com/vi/ohuuLmwER0A/0.jpg" width = "50%" />
</a>
<a target = "vid_menu" href = "//www.youtube.com/embed/ohuuLmwER0A?list=PLAg45-Ox3WR4gODmcAmIYHVvCpngXcCTZ&amp;index=1&amp;controls=0&amp;showinfo=0">
    <img id = "vidmenu4" src = "http://img.youtube.com/vi/mcWhnMmlNFE/0.jpg" width = "50%" />
</a>

Then the display: flex breaks and the images are displayed one on top of the other block-style.

然后显示:flex break并且图像显示在另一个块样式的顶部。

Why does adding links break the layout, and how do I get it to display with the links the same as it does without?

为什么添加链接会破坏布局,如何使用链接显示布局?

3 个解决方案

#1

I did some tweak in your html markup and style sheet to get your desired output but there are still many ways to achieve this

我在你的html标记和样式表中做了一些调整以获得你想要的输出,但仍有很多方法可以实现这一点

UPDATE

I implemented it on your website and this was the result

我在你的网站上实现了它,这就是结果

.container {
  width: 100%;
  display: flex;
}

#parent_div {
  position: relative;
  display: inline-block;
  max-width: 650px;
  margin: 0 auto;
}

.thumb {
  height: 250px;
  width: 280px;
  margin: 10px;
  border: 1px solid #CACACA;
  border-radius: 3px;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  vertical-align: text-top;
}

<div class="container">
<div id="parent_div">
<a target = "vid_menu" href = "//www.youtube.com/embed/ohuuLmwER0A?list=PLAg45-Ox3WR4gODmcAmIYHVvCpngXcCTZ&amp;index=1&amp;controls=0&amp;showinfo=0">
    <img id = "vidmenu1" class="thumb" src = "http://img.youtube.com/vi/EmoSTXvo0NU/0.jpg"/>
</a>
<a target = "vid_menu" href = "//www.youtube.com/embed/ohuuLmwER0A?list=PLAg45-Ox3WR4gODmcAmIYHVvCpngXcCTZ&amp;index=1&amp;controls=0&amp;showinfo=0">
    <img id = "vidmenu3" class="thumb" src = "http://img.youtube.com/vi/h0Nj8sVV7g0/0.jpg"/>
</a>
<br style="clear:both" />                       
<a target = "vid_menu" href = "//www.youtube.com/embed/ohuuLmwER0A?list=PLAg45-Ox3WR4gODmcAmIYHVvCpngXcCTZ&amp;index=1&amp;controls=0&amp;showinfo=0">
    <img id = "vidmenu2" class="thumb" src = "http://img.youtube.com/vi/ohuuLmwER0A/0.jpg"/>
</a>
<a target = "vid_menu" href = "//www.youtube.com/embed/ohuuLmwER0A?list=PLAg45-Ox3WR4gODmcAmIYHVvCpngXcCTZ&amp;index=1&amp;controls=0&amp;showinfo=0">
    <img id = "vidmenu4" class="thumb" src = "http://img.youtube.com/vi/mcWhnMmlNFE/0.jpg"/>
</a>
</div>
</div>

#2

Your a tags most likely have their own set of styling properties assigned to them and cause the images "to break." Look at the styles for your links or post more code / link to page.

您的标签很可能会为其分配一组自己的样式属性,并导致图像“中断”。查看链接的样式或发布更多代码/链接到页面。

#3

Just discovered that a big part of the reason it wasn't working was that I was using percentage widths in the html for the images, as in <img src = ... width = "50%"> which is a no-no in HTML5. That wasn't the only problem, but a big part of it.

刚刚发现它不起作用的一个重要原因是我在html中使用了百分比宽度的图像,如这是一个禁忌在HTML5中。这不是唯一的问题,而是其中很大一部分。