Html 拆分<；李>；一分为二 此处介绍 ...

我想将每个列表元素分成两部分（在同一行中），左边是一个图像，右边是一个链接和一个文本（它们应该在两行中）。
我尝试在ext left上使用float left，但它不起作用。
使用JSFIDLE玩：
这是正确的版本：

添加此CSS:

<ul>
    <li>
        <div class="ext-left">
            <img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
        </div>
        <div class="ext-right">
            <a class="ext-name" href="#">Extension Name</a>
            <p class="ext-intro">Introduction here</p>
        </div>
    </li>
    ...
</ul>

---

新的小提琴左飘似乎起作用了。我觉得你做错了什么

---

将两个div向左浮动

.ext-left{

    float:left;
}
li{
    clear:both;
}

---

你只需要给每个div设置一个宽度，否则，他们认为应该是100%宽，这就不允许下一个div在它旁边浮动。请参阅。

以下是您要做的

.ext-left, .ext-right{
    float: left;
}

li {
    clear: both;
}

宽度：150px>
此处介绍

其思路如下： 1.给“li”一个宽度 2.给两个div加一个宽度 3.分别向左和向右浮动 4.在末尾添加一个带有clear=“both”的喙，尝试以下操作：

<ul>
<li style="width:150px">
    <div style="width:100px;float:left">
        <img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
    </div>
    <div style="width:50px;float:right">
        <a class="ext-name" href="#">Extension Name</a>
        <p class="ext-intro">Introduction here</p>
    </div>
    <br clear="both"/>
</li>

这个怎么样：

li {
    clear: left;
}

.ext-left {
    float: left;   
}

[]

---

（但邪恶的浏览器不支持，请参见信息）

在LI上添加一个clear来重置每一个的浮点值，我修改了我的答案。这就是你要让它工作所必须做的。而且也没有那么多额外费用：P

li > div{
    display: inline-block;
}