Css 如何获得<；ul>；使项目符号与浮动图像对齐？

我有一个图像浮动到包含div的左侧

然后，我有一个我想对齐旁边的图像

我的问题是子弹（BG图像）没有清除图像

我希望下图能说明我的问题：

---

---

我的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 -->

---

任何帮助或建议都将不胜感激o）

---

NB：如果可能的话，我想尝试找到一个解决方案，而不将图像和文本分成两个不同的分区（一个左分区和一个右分区）。这是因为我希望包含的div是wysiwyg控制的，所以它需要能够真正处理其中的任何内容。那里可能有图像，也可能没有。我希望这是有意义的

将您的列表从图像中分离出来，放入它们自己的

div

中，并将

div的

放在适当的位置。

可能只有CSS的解决方案很少

将

overflow:hidden

添加到

#project detail ul li

中，这样做会使列表项在浮动图像附近正确对齐

使用

列表样式图像

（和

列表样式位置：如果需要，在内部

），这样项目符号将定位在内容附近，而不是背景中

使用

：before

伪元素，根据需要定位它，这样它就不会位于浮动图像下

---

这将是理想的解决方案，但不幸的是，我正在尝试设置它，以使包含的div是wysiwyg，并且人们可以随时输入他们想要的内容。那里可能有图像，也可能没有。嗯……我看不出你的需求是如何阻止你将内容划分为一个数组的，即使这意味着嵌套，这当然是很好避免的

 #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;
}