Как получить <ul>с маркерами для правильного выравнивания рядом с плавающим изображением? - PullRequest
Новая
       37

Как получить <ul>с маркерами для правильного выравнивания рядом с плавающим изображением?

0 голосов
/ 15 января 2012

У меня есть изображение, плавающее слева от содержащего элемента.

У меня есть то, что я хотел бы выровнять рядом с изображением.

Моя проблема в том, что пули (которые являются изображениями BG) не очищают изображение.

Я надеюсь, что изображение ниже иллюстрирует мою проблему:

enter image description here

Мой HTML: 

<div id="project-detail">
        <img src="/assets/images/our-work/hartford-444x444.jpg" alt="Hartford Homes" />
        <h2>Project Detail Heading here H2</h2>
        <p>Work intro text will go in here text dolor sit amet, consectetur adip isicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudan tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudan tium, totam rem <a href="#" title="Link Title">this is a link</a> aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>
        <p>Voluptatem accusantium doloremque laudan tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>
        <ul>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
            <li>Ut enim ad minima exercit. veniam, quis.</li>
        </ul>
    </div><!-- end #project-detail -->

и мой CSS: 

 #project-detail {
    float:left;
    clear:both;
    width:940px;
    margin-bottom:30px;
}

#project-detail img {
    float:left;
    margin:0 20px 20px 0;
    border:8px solid #eee; 
    background:#eee;
    /* CSS3 border radius */
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

#project-detail h2 {

}

#project-detail ul {
    list-style:none;
    line-height:1.6;
}

#project-detail ul li {
    padding-left:16px;
    background:url(/assets/images/li-bg.gif) top left no-repeat;
}

Любая помощь или совет будет принята с благодарностью! : О)

NB. Если возможно, я хочу попытаться найти решение, не разделяя изображение и текст на два разных элемента (один слева и один справа). Это потому, что я хотел бы, чтобы содержащийся div контролировался wysiwyg, поэтому он должен уметь обрабатывать что-либо в нем. Там может быть изображение, а может и нет. Я надеюсь, что это чувство

Ответы [ 2 ]

1 голос
/ 16 января 2012

Существует несколько возможных решений только для CSS.

  1. Добавьте overflow: hidden к #project-detail ul li, сделав так, чтобы элементы списка были правильно выровнены рядом с плавающим изображением.

  2. Используйте list-style-image (и list-style-position: inside, если необходимо), чтобы пуля располагалась рядом с содержимым, а не в фоновом режиме.

  3. Используйте псевдоэлемент :before, расположив его так, как вам нужно, чтобы он не попадал под плавающее изображение.

1 голос
/ 15 января 2012

отделяет ваш список от изображения, на свои div и позиционирует div's соответственно.

...