Как я могу получить элементы списка, чтобы остаться вместе с помощью CSS? - PullRequest
Новая
       12

Как я могу получить элементы списка, чтобы остаться вместе с помощью CSS?

2 голосов
/ 15 апреля 2009

Скелет HTML это 

<div class="TwoCol">
<img src="imgurl"/>
<h1>A headline</h1>
<p>Some exciting text</p>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<p>More riveting text </p>
</div>

CSS это 

.TwoCol img{
    float:left;
    padding-right:5px;
    border:none;
}
.TwoCol ul{
list-style-type:none;
}

Эффект, который мне нужен, - это изображение вверху слева в моем div с текстом справа, если текст длиннее, чем изображение, которое оно оборачивает под изображением.

ОДНАКО, если список начинается справа от изображения, я хочу, чтобы все элементы были выровнены вертикально друг над другом, а не чтобы элементы списка под изображением появлялись под изображением и разбивали список на два раздела.

Мне нужна утилита для рисования изображений:)

Это 

IMG Headline
IMG Para1
IMG Item A
    Item B
    Item C
Para2

не Это 

IMG Headline
IMG Para1
IMG Item A
Item B
Item C
Para2

Спасибо!

Ответы [ 3 ]

3 голосов
/ 15 апреля 2009

Вы можете установить <ul> на 

display: inline-block;

Возможно, вы также захотите clear: left; своих изображений, поскольку вполне возможно, что они могут начать складываться рядом друг с другом в зависимости от другого контента.

1 голос
/ 15 апреля 2009

Добавьте margin-left к вашему ul, то есть ширину изображения (или чуть больше).

0 голосов
/ 15 апреля 2009

id скажем, установите изображение как background-image и затем оставьте ul или li поле слева. убедитесь, что вы сбросили отступы и отступ до 0, иначе выходные данные будут различаться для разных браузеров

...