html - 样式列表作为图像旁边的 float

Question

如何从这个列表中实现这个布局:

<ul>
    <li id="item1">
        <span><img src="..." /></span>
        <ul id="description">
            <li class="line1">This is the first line</li>
            <li class="line2">This is the second line</li>
            <li class="line3">This is the third line</li>
        </ul>
    </li>
</ul>

我尝试了 float 方法，但没有成功

span {
    float:left;
    width:14em;
    height:14em;
}

#description {
    float:right;
    width:20em;
    margin-left:3em;
}

Answer 1

以下是我如何使用 CSS 获得它，您可以根据自己的喜好进行编辑:http://jsfiddle.net/theStudent/f69UG/3/

CSS

ul{
    list-style:none;
    margin: 0;
    width: 40em;
}
span {
    float:left;
    width:14em;
    height: 14em;
    height:14em;
    background: red;
}

#description {
    float:right;
    width:20em;
    min-height: 14em;
    margin-left:3em;
    color:#000;
}

#description > li{
    height: 4.5em;
}

HTML

<ul>
    <li id="item1">
        <span><img src="..." /></span>
        <ul id="description">
            <li class="line1">This is the first line</li>
            <li class="line2">This is the second line</li>
            <li class="line3">This is the third line</li>
        </ul>
    </li>
</ul>