Tell me, please, how in my example to correct the style, so that each photo has an inscription in the lower left corner. I only get it this way when the pictures are in one column, but I need to be 'in line'.

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

    1 answer 1

    float: left; and the width should be set to .container , not the image.

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

    • Elena Semenchenko, thank you, it works as it should. - Alex
    • @Kromster, ok))) I got carried away)) - HamSter