Решил сделать такой "каталог" и сделать его резиновым. Выровнял столбцы display:inline-block
, но появились отступы между этими ячейками, чтобы убрать их, задал margin-left:-2%
; все сомкнулось в единое целое и border не разрывался, но пропал текст верхней строки. Подскажите, как сделать такой border:
CSS:
.figure {
width:20%;
height:35%;
border-radius:none;
font-style:italic;
padding:1em 2em;
text-align:center;
}
.figure img {
width:90%;
height:100%;
}
.figure p {
padding-top:2%;
}
#gallery {
border-bottom:1px solid #000;
width:100%;
height:50%;
margin-bottom:5%;
}
#gallery .figure {
display:inline-block;
float:none;
}
HTML:
<article id='gallery' align="center">
<div class='figure'>
<p><a href='images/komod.png'><img id='hall' src='images/komod.png' alt='Комод' /></a></p>
<p><a href='hall.html'>Шкафы Купе</a></p>
</div>
<div class='figure'>
<p><a href='images/komod.png'><img id='hall' src='images/pr.png' alt='Комод' /></a></p>
<p><a href='hall.html'>Шкафы Купе</a></p>
</div>
<div class='figure'>
<p><a href='images/komod.png'><img id='hall' src='images/sh.png' alt='Комод' /></a></p>
<p><a href='hall.html'>Шкафы Купе</a></p>
</div>
<div class='figure'>
<p><a href='images/lotus.jpg'><img id='hall' src='images/komod.png' alt='Храм Лотоса' /></a></p>
<p><a href='lotus.html'>Кухонные гарнитуры </a></p>
</div>
<div class="gall">
<div class='figure'>
<p><a href='images/arctic.jpg'><img id='hall' src='images/komod.png' alt='Арктичний собор' /></a></p>
<p><a href='history.html#arctic'>Журнальные столики </a></p>
</div>
<div class='figure'>
<p><a href='images/familia.jpg'><img id='hall' src='images/familia.jpg' alt='Саґрада Фамілія' /></a></p>
<p><a href='familia.html'>Обеденные столы </a></p>
</div>
<div class='figure'>
<p><a href='images/vasyl.jpg'><img id='hall' src='images/vasyl.jpg' alt='Собор Василя Блаженного' /></a></p>
<p><a href='history.html#vasyl'> Прихожие и гардеробные </a></p>
</div>
<div class='figure'>
<p><a href='images/minimal.jpg'><img id='hall' src='images/minimal.jpg' alt='Церква розради' /></a></p>
<p><a href='history.html#minimal'>Письменные столы</a></p>
</div>
</div>
</article>*/