Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > CSS и div


Автор: OlexXX 5.1.2009, 21:49
CSS:

.leftelm {float:left; }

HTML:

<div>
<img class="leftelm" src="images/1.gif">
... какой-то текст ... </div>

<div>
<img class="leftelm" src="images/2.gif">
... какой-то текст ... </div>

Блоки идут друг за другом, картинки размещаются слева, но размер блоков почему-то определяется высотой текста. Как сделать, чтобы размер блока определялся высотой картинки или текста, в зависимости от того, что из них больше? Таблицу не предлагать.

Автор: WebMast 5.1.2009, 22:06
OlexXX, не могли бы вы показать больше кода? А то у меня получается полная берда, и я не могу понять что вы хотите..

Автор: OlexXX 5.1.2009, 22:10
Мне надо, чтобы страничка состояла из блоков, в каждом из которых картинка + текст. НО нужно, чтобы блоки шли друг под другом, как строки в таблице. Хочу сделать с помощью css. 

Автор: WebMast 5.1.2009, 22:30
А зачем вы тогда картинке присваиваете float:left? Если без него, то все норм..  Или вам нужно так:
/***********/******/
/                   /           /
/      Img       /   Text  /
/                   /           /
/***********/******/

Тогда придется верстать совсем по другому!

Автор: OlexXX 5.1.2009, 22:33
|****|****|
|        |text  |
| img  |____| 
|        |
|____|
|****|****|
|        |text  |
| img  |____| 
|        |
|____|

Да, вот так...
 А как сверстать?

Автор: ksnk 5.1.2009, 23:20
http://rmcreative.ru/blog/post/clear-ili-overflowhidden само приползло...

Автор: OlexXX 6.1.2009, 00:15
Спасибо! clear:both - спасло!  smile 

Автор: Violator 10.1.2009, 05:52
я использую такой класс в таких случаях...
в блоке в котором есть выравнивание добавлять class="rrow"
Код

.rrow:after {
    CONTENT: ".";
    DISPLAY: block;
    HEIGHT: 0;
    CLEAR: both;
    VISIBILITY: hidden;
}
.rrow {
    DISPLAY: inline-block;
}
/* Hides from IE-mac \*/
* html .rrow {
    HEIGHT: 1%;
}
.rrow {
    DISPLAY: block;
}
/* End hide from IE-mac */


Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)