主页 / 问题 / 574832
Accepted
Alex
Asked:2020-10-07 16:44:38 +0800 CST2020-10-07 16:44:38 +0800 CST

修复图片左下角的标题

  • 772

请告诉我如何更正我示例中的样式，以便每张照片的左下角都有题词。只有当图片在一栏中时它才对我有用，但这是必要的 - “在一行中”。

#menu {
	width:100%;
	height:30px;
    background: #E8DDCF;
    border: solid 1px #E8DDCF;
}


#content {
    display: inline-block;/* иначе не видно рамки;*/
	width:100%;	
    background: #F3E7D8;
    border: solid 1px #E8DDCF;
}


#fotos img {
	border: solid 1px #E8DDCF;
    float: left;  /* иначе - все в один столбец;*/
    margin: 0 auto;
}


#fotos img:hover {
    border: 1px solid red;
}


.container {
    position: relative;
}


.bottomleft {
    position: absolute;
    bottom: 2px;
    left: 5px;
    font-size: 11px;
    color: blue;
}


.f {
	width: 12.33%;
	height: 9%;
    border: 1px solid #F3E7D8;
}
<body>
<div id="menu"> </div>	

<div id='content'>
<div id='fotos'>
<div class="container"><img class="f" src="DSC01.jpg" alt="01"><div class="bottomleft">q</div></div>
<div class="container"><img class="f" src="DSC02.jpg" alt="02"><div class="bottomleft">w</div></div>
<div class="container"><img class="f" src="DSC03.jpg" alt="03"><div class="bottomleft">e</div></div>
<div class="container"><img class="f" src="DSC04.jpg" alt="04"><div class="bottomleft">r</div></div>
<div class="container"><img class="f" src="DSC05.jpg" alt="05"><div class="bottomleft">t</div></div>
<div class="container"><img class="f" src="DSC06.jpg" alt="06"><div class="bottomleft">y</div></div>
<div class="container"><img class="f" src="DSC07.jpg" alt="07"><div class="bottomleft">u</div></div>
<div class="container"><img class="f" src="DSC08.jpg" alt="08"><div class="bottomleft">i</div></div>
<div class="container"><img class="f" src="DSC09.jpg" alt="09"><div class="bottomleft">o</div></div>
<div class="container"><img class="f" src="DSC10.jpg" alt="10"><div class="bottomleft">p</div></div>
</div>
</div>
</body>

html5

1 个回答

  1. Best Answer

    float: left;并且宽度必须设置为.container，而不是图像。

    #menu {
	width:100%;
	height:30px;
    background: #E8DDCF;
    border: solid 1px #E8DDCF;
}


#content {
    display: inline-block;/* иначе не видно рамки;*/
	width:100%;	
    background: #F3E7D8;
    border: solid 1px #E8DDCF; 
}


#fotos img {
	border: solid 1px #E8DDCF;
    
    margin: 0 auto;
}


#fotos img:hover {
    border: 1px solid red;
}


.container {
    position: relative;
  
    width: 12.33%;
    float: left;  /* иначе - все в один столбец;*/
}


.bottomleft {
    position: absolute;
    bottom: 2px;
    left: 5px;
    font-size: 11px;
    color: blue;
}


.f {	
    width: 100%;
	height: 9%;
    border: 1px solid #F3E7D8;
}
    <body>
<div id="menu"> </div>	

<div id='content'>
<div id='fotos'>
<div class="container"><img class="f" src="DSC01.jpg" alt="01"><div class="bottomleft">q</div></div>
<div class="container"><img class="f" src="DSC02.jpg" alt="02"><div class="bottomleft">w</div></div>
<div class="container"><img class="f" src="DSC03.jpg" alt="03"><div class="bottomleft">e</div></div>
<div class="container"><img class="f" src="DSC04.jpg" alt="04"><div class="bottomleft">r</div></div>
<div class="container"><img class="f" src="DSC05.jpg" alt="05"><div class="bottomleft">t</div></div>
<div class="container"><img class="f" src="DSC06.jpg" alt="06"><div class="bottomleft">y</div></div>
<div class="container"><img class="f" src="DSC07.jpg" alt="07"><div class="bottomleft">u</div></div>
<div class="container"><img class="f" src="DSC08.jpg" alt="08"><div class="bottomleft">i</div></div>
<div class="container"><img class="f" src="DSC09.jpg" alt="09"><div class="bottomleft">o</div></div>
<div class="container"><img class="f" src="DSC10.jpg" alt="10"><div class="bottomleft">p</div></div>
</div>
</div>
</body>

    • 2

相关问题