如何从这个列表中实现这个布局:
<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;
}
最佳答案
以下是我如何使用 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>
关于html - 样式列表作为图像旁边的 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21036932/