Question

enter image description here

如何从此列表中实现此布局：

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

我尝试了浮动方法，但它没有这样做

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>

Answer 2

不要float列表，只是图像（它与在段落中浮动图像具有相同的行为，文本将在图像之后换行）。示例：http://jsfiddle.net/Lqw53/

Answer 3

在此解决方案中，我使用<img>标记的align属性将图像对齐到左侧，然后文本的其余部分将向右流动。

所以我们有HTML：

<div>
    <img src="http://graph.facebook.com/1126016138/picture?type=large" align="left" />
    <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>
</div>

然后在考虑间距时，我们的CSS作为子弹点不被HTML考虑：

#description {
    list-style:none;    
}

如果你想看看，这是一个jsFiddle：jsFiddle

Answer 4

ul和img是块元素，因此您需要将其显示类型更改为内联块以确保它们水平对齐

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

CSS

ul, img{
    display: inline-block;
}

img {
    float:left;
    width:14em;
    height:14em;
}
ul{
    list-style-type: none;
}
li{
    margin-bottom: 75px;
}
#description {
    float:right;
    margin-left:3em;
    margin-top: 5px;
}

<强> JSFiddle

Answer 5

您可以查看：

Fidle Link here

ul{
    list-style:none;
    margin: 0;
    padding:0

}
#item1 span {/*Span take width and height as per your image size.*/
    float:left;
    display:inlne-block;
    margin-right:20px;

}

#description {
    float:left;
    color:#333;
    margin-top:10px;
}

#description li{
    line-height:20px;
    display:block;
    padding-bottom:10px;
}

祝你好运......

样式列表在图像旁边浮动

5 个答案: