Выравнивание по горизонтали Joomla, K2, mod_k2content

one

Профессор
Регистрация
22 Июн 2011
Сообщения
407
Реакции
46
Из за разного размер тайтла нарушается выравнивание по горизонтали. Подскажите решение.
 

Вложения

  • fghfhdfghdfgh.JPG
    fghfhdfghdfgh.JPG
    76,5 KB · Просмотры: 46
ссылка на сайт или html/css код?

P.S. вообще можно для блока заголовка прописать в css файле высоту, и тогда должно выглядеть все нормально и сделать шрифт поменьше желательно
 
ссылка на сайт или html/css код?

P.S. вообще можно для блока заголовка прописать в css файле высоту, и тогда должно выглядеть все нормально и сделать шрифт поменьше желательно


Вот фрагмент кода:

Код:
<div>
    <ul>
        <li>
            <a>title</a>
            <div>
            <a>image</a>
            </div>
        </li>
        <li>
            <a>title</a>
            <div>
            <a>image</a>
            </div>
        </li>
...
    </ul>
</div>

Как все расставить чтобы в выше показанном примере по горизонтали выравнивание было?
 
Вот Для просмотра ссылки Войди или Зарегистрируйся как сделать блоки одинаковой высоты.

То что доктор прописал. Взял пример с table. Правда в нем решение с одной строкой а как сделать перенос на 2, 3 и т.д. строку по мере увеличения ячеек?
 
Из за разного размер тайтла нарушается выравнивание по горизонтали. Подскажите решение.
Для html.
Код:
<table>
<tr><th>Lorem Ipsum is simply dummy text of the printing</th><th>Lorem Ipsum</th><th>Lorem Ipsum is simply dummy text</th><th>Lorem Ipsum is simply dummy text of the printing</th><th>Lorem</th></tr>
<tr><th><img src="[URL]http://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
<th><img src="[URL]http://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
<th><img src="[URL]http://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
<th><img src="[URL]http://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
<th><img src="[URL]http://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
</tr>
<tr><th>Lorem Ipsum is simply dummy text of the printing</th><th>Lorem Ipsum</th><th>Lorem Ipsum is simply dummy text</th><th>Lorem Ipsum is simply dummy text of the printing</th><th>Lorem</th></tr>
<tr><th><img src="[URL]http://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
<th><img src="[URL]http://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
<th><img src="[URL]http://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
<th><img src="[URL]http://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
<th><img src="[URL]http://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
</tr>
</table>
Для css.
Код:
table, td, th {
border:none;
text-align:center;
}
table {
width:auto;
border-collapse:collapse;/*ячейки разделяются обычным способом*/
margin:auto;
}
td, th {
height:auto; /*меняй на пиксели чтобы получить требуемую высоту*/
width:auto; /* меняй на пиксели чтобы получить требуемую ширину*/
padding:5px;
vertical-align:top;
background-color:none;
}
 
seraph22, пример кода внимательно изучили?
 
Вот фрагмент кода:

Код:
<div>
    <ul>
        <li>
            <a>title</a>
            <div>
            <a>image</a>
            </div>
        </li>
        <li>
            <a>title</a>
            <div>
            <a>image</a>
            </div>
        </li>
...
    </ul>
</div>

Как все расставить чтобы в выше показанном примере по горизонтали выравнивание было?

в CSS
Код:
ul li {display:inline-block;vertical-align:bottom;}
То что доктор прописал. Взял пример с table. Правда в нем решение с одной строкой а как сделать перенос на 2, 3 и т.д. строку по мере увеличения ячеек?

Само перенесет на следующую строку, как только ширина элементов списка превысит ширину внешнего блока
 
в CSS
Код:
ul li {display:inline-block;vertical-align:bottom;}


Само перенесет на следующую строку, как только ширина элементов списка превысит ширину внешнего блока

Ну вот не переносит...
 
one, Для просмотра ссылки Войди или Зарегистрируйся можете пример свой выложить?

Попробуйте в CSS ul {width:X;}, где X - ширина внешнего блока
 
Назад
Сверху