2

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

谢谢！

4

3 回答 3

3

你可以设置<ul>为

display: inline-block;

您可能还想要clear: left;您的图像，因为根据其他内容，它们可能会开始彼此相邻堆叠。

于 2009-04-15T13:11:40.733 回答
1

添加margin-left到你的ul那是图像的宽度（或更多）。

于 2009-04-15T11:54:12.167 回答
0

id 说将图像设置为背景图像，然后给 ul 或 li 一个左边距。确保您已将填充和边距重置为 0，否则输出将区分跨浏览器

于 2009-04-15T13:15:42.173 回答