樣式列表作爲浮動旁邊的圖像

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

來源

2014-01-10 user3024007

在此解決方案我使用<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

來源

2014-01-10 05:48:31

這是我如何得到它可以編輯你喜歡的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>

來源

2014-01-10 05:49:50 Ljubisa

UL和IMG是塊元素，所以你需要改變他們的顯示類型爲inline-block的，以確保它們對齊水平

<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

來源

2014-01-10 05:53:34 Orahmax

您可以檢查此：

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

好運...

來源

2014-01-10 06:44:32

不要float名單，只是圖像（它和floa具有相同的行爲在段落中繪製圖像，文本將在圖像之後進行包裹）。示例：http://jsfiddle.net/Lqw53/

來源

2014-01-10 07:01:10 n1kkou

樣式列表作爲浮動旁邊的圖像

回答

相關問題