Картинки отображаются криво

gore-lykovoe

#crp_related{overflow: auto;padding-top:20px;}   
#crp_related ul{list-style-type: none;margin: 10px;padding: 0px;display: block;clear: both;}   
#crp_related ul li{display: inline;float:left;width: 190px;font-size: 15px;text-align: center;}   
a.crp_title{display: block; width: 200px;}
Собственно если одна строка, то всё хорошо отображается. У меня, например, в сроку помещается 3 картинки. Однако если добавить 4, картинка вроде бы должна помещаться под первой. Но т.к. под картинкой находится текст, и он может занимать от 1 до 3 строк, то картинка может отображаться криво. В моем случае картинка смещается в сторону, если текст занимает две строчки. В результате получается белеберда. Как это исправить?По прикрепленному скриншоту будет всё понятно:
7 ответов

gore-lykovoe

А если у картинок поставить margin-top: 20px?Хотя более правильный способ - объединить картинку и подпись в один блок


gore-lykovoe

А если у картинок поставить margin-top: 20px?
Не помогает, даже если делаю 100 px, просто растояние между картинками с текстом увеличивается, и вроде бы текст не мешает, но картинки в таком же хаотичном расположении остаются
Хотя более правильный способ - объединить картинку и подпись в один блок
каким образом?Сейчас у меня так
#crp_related{overflow: auto;padding-top:20px;}   
#crp_related ul{list-style-type: none; margin: 10px; padding: 0px;display: block;clear: both;}   
#crp_related ul li{display: inline;  float:left;width: 190px;font-size: 15px;text-align: center; } 
#crp_related ul li img {
    width: 150px;
    height: 100px;
    padding: 2px;
    float: left;
    margin: 0 13px 0 0px;
    background: #FFFFFF;
    border: 1px solid #D0D0BB;
    border-radius: 5px;
    box-shadow: 0 0 5px #666666;
margin-top: 20px;
    
}  
#crp_related li img:hover {
    border: 1px solid #ffffff;
    padding: 2px;
    margin: 0 5px 0 4px;
}
a.crp_title{display: block; width: 180px;}
Жду мастера css


gore-lykovoe

не в css объединить, а в html


gore-lykovoe

Короче, вот структура Подпись -
Общий блок:
<div class = "imgblock">
   <img ... />
   <div class = "podpis">текст</div>
</div>


gore-lykovoe

не в css объединить, а в html
Короче, вот структура Подпись -
Не могу, это классы от плагина который в БД. Нужно именно через css как-то...


gore-lykovoe

Вместо картинки я использовал элемент div с бордюром в один пиксель и размером в сто пикселей по ширине и высоте.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image case</title>
 
</head>
    <style>
 
        ul li {
            display:block;
            width:100px;
            float:left;
            border:1px solid black;
            margin:3px;
        }
        ul li:nth-of-type(3n+1){
            clear: left;
        }
 
        li:after {
            content: 'Текст Текст Текст';
            display: block; 
            width: 98px;
            border:1px solid red;
        }
        
        /* Например, возьмем 6-й элемент и добавим туда больше текста */
        li:nth-of-type(6):after {
            content: 'Текст Текст Текст Текст Текст Текст Текст';
        }
        
        li:after :hover {
            background-color:#C5C5C5;
        }
        
        /* div вместо картинки */
        div {
            width:100px;
            height:100px;
            background-color:#e3c4c4;
        }
        
    </style>
<body>
<ul>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
 
</ul>
 
</body>
</html>


gore-lykovoe

Padimanskas, Огромное спасибо!) Наконец-то нашёлся знающий своё дело человек!