Question

这是我的HTML：

<div id="container">
<a href="http://arkhana.fr/img/01.png"><img class="item2" src="http://arkhana.fr/img/1.png" /></a>
<a href="http://arkhana.fr/img/02.png"><img class="item1" src="http://arkhana.fr/img/2.png" /></a>
<a href="http://arkhana.fr/img/03.png"><img class="item1" src="http://arkhana.fr/img/3.png" /></a>
<a href="http://arkhana.fr/img/04.png"><img class="item1" src="http://arkhana.fr/img/4.png" /></a>
<a href="http://arkhana.fr/img/05.png"><img class="item1" src="http://arkhana.fr/img/5.png" /></a>
<a href="http://arkhana.fr/img/06.png"><img class="item1" src="http://arkhana.fr/img/6.png" /></a>
<a href="http://arkhana.fr/img/07.png"><img class="item1" src="http://arkhana.fr/img/7.png" /></a>
<a href="http://arkhana.fr/img/08.png"><img class="item1" src="http://arkhana.fr/img/8.png" /></a>
<a href="http://arkhana.fr/img/09.png"><img class="item1" src="http://arkhana.fr/img/9.png" /></a>
<a href="http://arkhana.fr/img/10.png"><img class="item1" src="http://arkhana.fr/img/10.png" /></a>
</div>

这是我的CSS：

#container { 
width:auto;
height:80%;
background: #eee; 
position:absolute; 
left: 50px; 
top:50px; 
bottom:50px; 
padding:10px;
margin:0px;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
display: flex; 
flex-direction: column; 
flex-wrap: wrap;
}

.item2 { height:96%; float:left; padding:0; margin:2%; -webkit-flex-direction: column; flex-direction: column; }
.item1 { height:46%; float:left; padding:0; margin:2%; -webkit-flex-direction: column; flex-direction: column; }

使用超文本链接，looks like this

问题在于我没有设法让图片被设置样式。第一个应该比其他的大两倍。

没有超文本链接，looks like this
通过这种方式，图片看起来就像我想要的那样。但我需要添加超文本链接。

我猜我的CSS错了，因为当图片像这样<a href=""><img src=""/></a>时，CSS不起作用。我尝试了<p>，a.item2，img.item2 a等...

顺便说一下，为什么#container中的灰色不覆盖所有div？

最后一期：我让它反应灵敏，但有时会出现一个像素的问题，然后第二行图片消失（它会在第一行之后向右）。

Answer 1

请尝试以下操作： Demo

<强> CSS：

a.item2 {
    height:96%;
    float:left;
    padding:0;
    margin:2%;
    -webkit-flex-direction: column;
    flex-direction: column;
}
a.item1 {
    height:46%;
    float:left;
    padding:0;
    margin:2%;
    -webkit-flex-direction: column;
    flex-direction: column;
}
img {
    height:100%;
    width:100%;
}

<强> HTML：

<div id="container"> 
 <a href="http://arkhana.fr/img/01.png" class="item2"><img src="http://arkhana.fr/img/1.png" /></a>
 <a href="http://arkhana.fr/img/02.png" class="item1"><img src="http://arkhana.fr/img/2.png" /></a>
 <a href="http://arkhana.fr/img/03.png" class="item1"><img src="http://arkhana.fr/img/3.png" /></a>
 <a href="http://arkhana.fr/img/04.png" class="item1"><img src="http://arkhana.fr/img/4.png" /></a>
 <a href="http://arkhana.fr/img/05.png" class="item1"><img src="http://arkhana.fr/img/5.png" /></a>
 <a href="http://arkhana.fr/img/06.png" class="item1"><img src="http://arkhana.fr/img/6.png" /></a>
 <a href="http://arkhana.fr/img/07.png" class="item1"><img src="http://arkhana.fr/img/7.png" /></a>
 <a href="http://arkhana.fr/img/08.png" class="item1"><img src="http://arkhana.fr/img/8.png" /></a>
 <a href="http://arkhana.fr/img/09.png" class="item1"><img src="http://arkhana.fr/img/9.png" /></a>
 <a href="http://arkhana.fr/img/10.png" class="item1"><img src="http://arkhana.fr/img/10.png" /></a>

</div>

希望这是你想要的......

Answer 2

我改变了小提琴。我添加了新类并将其添加到 Code

 .link{
    height: 50%;
}

.item1 { height:99%; float:left; padding:0; margin:2%; -webkit-flex-direction: column; flex-direction: column; }

<a  href="http://arkhana.fr/img/01.png"><img class="item2" src="http://arkhana.fr/img/1.png" /></a>

Answer 3

一行Tweak而不更改HTML或添加类

#container a:nth-child(1){
    height: 96%;
    display: flex;
}

DEMO

Answer 4

试试这个

a.item2 {
height:96%;
float:left;
padding:0;
margin:2%;
-webkit-flex-direction: column;
flex-direction: column;
}

a.item1 {
height:46%;
float:left;
padding:0;
margin:2% 2% 2% 0;
-webkit-flex-direction: column;
flex-direction: column;
}

img {
height:100%;
width:100%;
}

添加

 #container{width:100%;overflow:hidden;}

Answer 5

将以下代码添加到css文件中。因为没有采取任何高度，这就是为什么图像没有显示为百分比。

#container{overflow:hidden;}

Answer 6

请检查此演示可能会对您有所帮助 Demo

a.aitem1
{
  height:46%;
}

检查此

another Demo

Answer 7

尝试使用工作Fiddle 进行一些css更改。

更新了Css：

#container { 
width:auto;
height:80%;
background: #eee; 
position:absolute; 
left: 50px; 
top:50px; 
bottom:50px; 
padding:10px;
margin:0px;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
display: flex; 
flex-direction: column; 
flex-wrap: wrap;
}
#container a {display: flex; margin:2%;  -webkit-flex-direction: column; flex-direction: column; height:46%;}
#container a:first-child {height:96%;flex-direction: initial;}
#container a img { padding:0; margin:0; max-width:100%; max-height:100%; }

图片上的超文本链接的CSS问题

7 个答案:

检查此