| |
|
|
| | Всем привет.
Всё никак не могу разобраться с "текучей" структурой. Мне надо сделать div с картинкой слева и подписью справа. Для этого к этой картинке прописываю стиль float: left;. Проблема в том, что сам div растягивается только на высоту подписи, но никак не картинки, которая гораздо его шире (по высоте).
div {
margin: 10px;
font-style: italic;
background-color: #EEEEEE;
}
div img.main {
float: left;
margin-right: 10px;
}
<div>
<img src=картинка.jpg class=main>
Ух ты какая мазня!
</div>
|
Как растянуть div по высоте картинки? | |
| |
|
|
| |
|
|
| |
для: Nytrogen
(29.09.2008 в 21:57)
| | | можно двумя способами решить это:
1
div {
margin: 10px;
font-style: italic;
background-color: #EEEEEE;
overflow: auto; //или scroll, точно уже не помню
}
div img.main {
float: left;
margin-right: 10px;
}
<div>
<img src=картинка.jpg class=main>
Ух ты какая мазня!
</div>
2
div {
margin: 10px;
font-style: italic;
background-color: #EEEEEE;
}
div img.main {
float: left;
margin-right: 10px;
}
div.clear {
margin: 0px;
padding: 0px;
font-size: 0px;
line-height: 0px;
height: 0px;
clear: both;
}
<div>
<img src=картинка.jpg class=main>
Ух ты какая мазня!
<div class="clear"><!-- spacer --></div>
</div>
|
решать можно двумя способами, но у обоих решений есть свои недостатки :) | |
| |
|
|
| |
|
|
| |
для: Lelik
(29.09.2008 в 22:05)
| | | Спасибо, я забыл про overflow ;).
Overflow: auto растягивает div по нужной высоте, а overflow: scroll добавляет полосы прокрутки. | |
| |
|
|
| |
|
|
| |
для: Nytrogen
(29.09.2008 в 22:21)
| | | это я знаю, только вот, при вложенных блоках с флоатом полосы прокрутки не добавляются... | |
| |
|
|
| |
|
|
| |
для: Lelik
(29.09.2008 в 22:29)
| | | Чёрт! В IE7 не работает overflow: auto в данном случае! Пришлось использовать дополнительный div с clear... %) | |
| |
|
|
| |
|
|
| |
для: Nytrogen
(29.09.2008 в 23:26)
| | | надо просто доктайп поставить для XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
| |
| |
|
|
| |
|
|
| |
для: Lelik
(30.09.2008 в 01:18)
| | | Спасибо, это помогло! Никогда раньше DOCTYPE не использовал :)
Вот ещё такой вопросец возник:
как можно сделать так, чтобы другие элементы, находящиеся внутри этого дива могли иметь заданный отступ от основной картинки слева? Когда пишу для них margin, поля расчитываются от границы дива, а не картинки... | |
| |
|
|
| |
|
|
| |
для: Nytrogen
(30.09.2008 в 21:24)
| | | задай margin для картинки :) | |
| |
|
|
| |
|
|
| |
для: Lelik
(30.09.2008 в 21:38)
| | | Эм... я забыл уточнить... у меня там справа от картинки список UL, да к тому же и вложенный...
<div class=image>
<img src=Pictures/pencil.jpg class=main>
<h2>Заоголовок</h2>
<ul>
<li>Первое</li>
<ul>
<li>Первое А</li>
<li>Первое Б</li>
<li>Первое В</li>
</ul>
<li>Второе</li>
</ul>
</div>
|
margin-right для картинки сдвигает список, но никак не его элементы, которые должны быть выравнены классическим способом, т.е. так, если бы картинки не было. | |
| |
|
|
| |
|
|
| |
для: Nytrogen
(30.09.2008 в 21:48)
| | | чет я не понял... можно скриншот? | |
| |
|
|
| |
 15.3 Кб |
|
| |
для: Lelik
(30.09.2008 в 21:53)
| | | Вуаля... Надо, чтобы список был визуально вложенным. | |
| |
|
|
| |
|
|
| |
для: Nytrogen
(30.09.2008 в 22:06)
| | | ну это уже надо стили для списков писать :) и кстати лучше их вот так выстраивать:
<div class="image">
<img src="Pictures/pencil.jpg" class="main"/>
<h2>Заоголовок</h2>
<ul>
<li>
Первое
<ul>
<li>Первое А</li>
<li>Первое Б</li>
<li>Первое В</li>
</ul>
</li>
<li>Второе</li>
</ul>
</div>
|
кста, при использовании XHTML рекомендовано атрибуты писать в кавычках и все теги должны быть закрытыми, включая одиночные :) | |
| |
|
|
| |
7.2 Кб |
|
| |
для: Lelik
(30.09.2008 в 22:39)
| | | >>ну это уже надо стили для списков писать
если убрать картинку, то получается вот такой видон (см. файл)... я же ничего не меняю в CSS (wasntme) | |
| |
|
|
| |
|
|
| |
для: Nytrogen
(30.09.2008 в 22:48)
| | | и всеже, если задать стили для списков? | |
| |
|
|
| |
|
|
| |
для: Lelik
(30.09.2008 в 23:34)
| | | Лениво))) но похоже другого выхода нет... всё прекрасно работает если для UL тупо поставить margin-left: 200px... тогда список отъезжает от картинки и нормально выравнивается... и всё же не верю, что нет другого способа... | |
| |
|
|
| |
|
|
| |
для: Nytrogen
(01.10.2008 в 00:07)
| | | ну можно попробовать для ul поставить float: left; | |
| |
|
|
| |
|
|
| |
для: Lelik
(01.10.2008 в 00:37)
| | | Точно! Это сработало, спасибо. | |
| |
|
|
