如何結合圖片和文字對我的HTML/CSS

我的全HTML CSS &這裏如何結合圖片和文字對我的HTML/CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head><style> 

ul.ItemList, ul.ItemList li 
{ 
    list-style-type: none; 
    list-style-position: outside; 
    list-style-image: none; 
} 
ul.ItemList li.Item 
{ 
    padding-top: 15px; 
    padding-right: 15px; 
    padding-bottom: 15px; 
    padding-left: 15px; 
    border-top-color: #ddd; 
    border-top-width: 1px; 
    border-top-style: solid; 
} 
ul.ItemList div.Desc 
{ 
    font-size: 12px; 
    margin-bottom: 10px; 
} 
ul.ItemList div.Desc span.Title img 
{ 
    width: 60px; 
    height: 60px; 
    overflow: hidden; 
    margin-top: 0px; 
    margin-right: 10px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    float: left; 
} 
ul.ItemList div.Desc span 
{ 
    line-height: 2.5; 
    padding-left: 10px; 
} 
ul.ItemList div.Desc span.Title 
{ 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 
ul.ItemList div.Desc span.Title a 
{ 
    font-size: 14px; 
    font-weight: bold; 
} 

</style></head> 
<body><center><table cellSpacing="0" cellPadding="0"><tbody><tr> 

<td align="middle"> 

<br /> 

<ul class="ItemList"> 

    <li class="Item"> 
    <div class="Desc"> 
    <span class="Title"> 
    <a href=""><img alt="" src="" /></a><a href="">Item1</a></span> 
    </div> 
    Item1 
    </li> 

    <li class="Item"> 
    <div class="Desc"> 
    <span class="Title"> 
    <a href=""><img alt="" src="" /></a><a href="">Item2</a></span> 
    </div> 
    Item2 
    </li> 

</ul> 
</td> 

</tr></tbody></table></center></body></html>

這是正常的，直到我改變了圖像的尺寸做大尺寸，例如

ul.ItemList div.Desc span.Title img 
{ 
    width: 100px; 
    height: 100px;

我怎樣改進，使圖像總是對準於文字很好左右不管是圖像的大小？

來源

2012-12-04 newuser

添加overflow：auto更改ul.ItemList li.Item

ul.ItemList li.Item 
{ 
    padding: 15px; 
    border-top: #ddd 1px solid; 
    overflow:auto 
}

DEMO

來源

2012-12-04 09:36:03 Sowmya

工作！謝謝。 – newuser

如何結合圖片和文字對我的HTML/CSS

回答

相關問題