锚标签不填充高度和宽度
Anchor tag not filling height and width
我正在尝试在测试站点上创建图库部分,我已经创建了图库,但由于某种原因,a 标签根本无法填充图像的高度和宽度,它们似乎都折叠成第一行图像的第一季度。
这是代码:(实际上,使用此代码,a 标签获取高度和宽度,但图像堆叠在一起)
HTML
<section class="portfolio">
<h1>— PORTFOLIO —</h1>
<div class="gallery">
<a href="#">
<img src="img/img1.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img2.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img3.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img4.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img5.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img6.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img7.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img8.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img9.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href=#"">
<img src="img/img10.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img11.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img12.jpg" alt="">
</a>
</div>
</section>
CSS
.portfolio {
width: 90%;
position: relative;
left: 80px;
}
.portfolio h1 {
text-align: center;
margin-bottom: 50px;
margin-top: 50px;
font-size: 60px;
font-family:'Poiret One', cursive;
}
.gallery img {
margin: 5px;
float: left;
height: 230px;
width: 330px;
border: 1px solid #000;
border-radius: 3px;
}
.gallery a {
display: inline-block;
}
我可能做错了什么,但我无法解决!
提前致谢。
你可以试试这个。
删除 .gallery img
上的 float:left
。然后在 .gallery img
和 .gallery
上添加 display:inline-block
.portfolio {
width: 90%;
position: relative;
left: 80px;
}
.portfolio h1 {
text-align: center;
margin-bottom: 50px;
margin-top: 50px;
font-size: 60px;
}
.gallery{
display:inline-block;
}
.gallery img {
display:inline-block;
margin: 5px;
height: 230px;
width: 330px;
border: 1px solid #000;
border-radius: 3px;
}
.gallery a {
display: inline-block;
}
<section class="portfolio">
<h1>— PORTFOLIO —</h1>
<div class="gallery">
<a href="#">
<img src="img/img1.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img2.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img3.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img4.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img5.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img6.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img7.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img8.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img9.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href=#"">
<img src="img/img10.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img11.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img12.jpg" alt="">
</a>
</div>
</section>
希望这对您有所帮助。
我可以假设您希望图像以网格方式显示,如果是这样,下面的代码将有所帮助:
.gallery {
display: inline-block;
}
请参阅此处 fiddle。
请告诉我它是否适合你。
我正在尝试在测试站点上创建图库部分,我已经创建了图库,但由于某种原因,a 标签根本无法填充图像的高度和宽度,它们似乎都折叠成第一行图像的第一季度。
这是代码:(实际上,使用此代码,a 标签获取高度和宽度,但图像堆叠在一起)
HTML
<section class="portfolio">
<h1>— PORTFOLIO —</h1>
<div class="gallery">
<a href="#">
<img src="img/img1.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img2.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img3.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img4.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img5.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img6.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img7.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img8.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img9.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href=#"">
<img src="img/img10.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img11.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img12.jpg" alt="">
</a>
</div>
</section>
CSS
.portfolio {
width: 90%;
position: relative;
left: 80px;
}
.portfolio h1 {
text-align: center;
margin-bottom: 50px;
margin-top: 50px;
font-size: 60px;
font-family:'Poiret One', cursive;
}
.gallery img {
margin: 5px;
float: left;
height: 230px;
width: 330px;
border: 1px solid #000;
border-radius: 3px;
}
.gallery a {
display: inline-block;
}
我可能做错了什么,但我无法解决!
提前致谢。
你可以试试这个。
删除 .gallery img
上的 float:left
。然后在 .gallery img
和 .gallery
display:inline-block
.portfolio {
width: 90%;
position: relative;
left: 80px;
}
.portfolio h1 {
text-align: center;
margin-bottom: 50px;
margin-top: 50px;
font-size: 60px;
}
.gallery{
display:inline-block;
}
.gallery img {
display:inline-block;
margin: 5px;
height: 230px;
width: 330px;
border: 1px solid #000;
border-radius: 3px;
}
.gallery a {
display: inline-block;
}
<section class="portfolio">
<h1>— PORTFOLIO —</h1>
<div class="gallery">
<a href="#">
<img src="img/img1.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img2.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img3.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img4.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img5.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img6.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img7.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img8.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img9.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href=#"">
<img src="img/img10.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img11.jpg" alt="">
</a>
</div>
<div class="gallery">
<a href="#">
<img src="img/img12.jpg" alt="">
</a>
</div>
</section>
希望这对您有所帮助。
我可以假设您希望图像以网格方式显示,如果是这样,下面的代码将有所帮助:
.gallery {
display: inline-block;
}
请参阅此处 fiddle。
请告诉我它是否适合你。