Fatal编程技术网
  • html/
  • Html CSS问题与图片上的超文本链接

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

html css

Html CSS问题与图片上的超文本链接,html,css,Html,Css,这是我的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.

这是我的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是错误的，因为当图片像这样时，CSS就不起作用了。我试过
，
a.item2
，
img.item2 a
等等

顺便问一下，为什么
#容器中的灰色没有覆盖所有div

最后一个问题：我让它有响应性，但有时会出现一个像素的问题，然后第二行图片消失（它位于第一行之后的右侧）。
尝试如下：

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%;
}



<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>



#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%; }


HTML:


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%;
}



<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>



#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%; }







希望这是你想要的。
我换了小提琴。我添加了新类并将其添加到



.link{
身高：50%；
}
.item1{height:99%；float:left；padding:0；margin:2%；-webkit flex-direction:column；flex-direction:column；}

在不更改HTML或添加类的情况下进行一行调整


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


试试这个


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%;
}


加


将以下代码添加到css文件中。因为没有任何高度，所以图像没有以百分比显示


#container{overflow:hidden;}



请查看此演示，它可能会对您有所帮助


检查这个

尝试此操作并进行一些css更改

更新的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%;
}



<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>



#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%; }



嗯，我在看小提琴，我不确定我应该看到什么是错的。你能解释一下吗：1）你希望它看起来像什么？2） 你看到的是什么？（注意：不要在评论中回复，编辑你的问题并在那里添加信息，因为它应该是你问题的一部分）我希望它看起来像是我在CSS代码部分之后发布的演示，相反，它看起来像是我在CSS代码部分之前发布的演示。在堆栈溢出中，我们希望这个问题永远存在。你的小提琴很快就会消失。。。你的问题本身应该是完整的。在你的问题中，你应该能够解释你期望看到的是什么——我不必为了弄明白你想要什么而去胡闹。此外，据我所知，你的问题可能是特定于浏览器的，我可能在两个小提琴中看到相同的东西。。。出于这些原因（以及更多其他原因），你应该能够向我解释。。。你期望的是什么，你看到的是什么。现在，事实证明，我可以通过转到工作小提琴，在你的任何一张图像周围添加一个span标记来复制这个问题。。。sop看起来，在img周围添加一个内联（而不是块）级别标记是在破坏东西。这可能会帮助您解决问题。我尝试在图像周围添加一个span标记，因此看起来是这样的：
。不行了,。。。我想我不太明白你的建议…谢谢，但我想保留图片的纵横比。实际上，每张图片都可以调整大小。我希望图片是正方形的（项目2比项目1大两倍）。然后你可以使用图像的最大宽度/高度，而不是宽度/高度谢谢你的回答。它似乎不是代码的好链接。。。因此，我无法理解
.link
是关于什么的……这正是为什么你不需要为你的问题把你的信息放在小提琴里的原因。。。但你还没有告诉我们一个有效的解决方案应该是什么样子。。。。。。这个问题的答案在我的第一篇文章中：有两个演示，一个是关于它应该是什么样子的，另一个是关于超文本链接的问题。正如你告诉我要更加明确，我编辑了我的帖子，并重新解释了我要寻找的内容以及它应该是什么样子。你想让它作为我帖子中的第一个演示，它是响应性的。请在这里再次共享我找不到的内容。它是：-我想要完全相同的外观，但图片上有超文本链接。我的问题是，当我添加链接时，图片不再是样式。