フローティングされたimgの周りにulを流すには

imgが左にフローティングされ、次にimgの右側にレンダリングされるべき長いulが続いて、その下に続きます。これは行いますが、imgの隣にあるulの部分はすべて一列に並んでいて、インデントを失います。フローティングされたimgの周りにulを流すには

これは最小の例です。（jsbinでも）

<html> 
<head> 
</head> 
<body> 
    <div style="float:left"><img src="http://i410.photobucket.com/albums/pp190/FindStuff2/Photography/Winter/winter.jpg" width="200" height="150" /></div> 
    <ul> 
     <li>Level 1</li> 
     <li>Level 1</li> 
     <li> 
      <ul> 
       <li>Level 2</li> 
       <li>Level 2</li> 
       <li>Level 2</li> 
       <li>Level 2</li> 
      </ul> 
     </li> 

     <li>Level 1</li> 
     <li>Level 1</li> 
     <li>Level 1</li> 
     <li>Level 1</li> 
    </ul> 
    <div style="clear:both"><!-- --></div> 
    More content More content More content More content More content More content More content More content More content More content More content 
</body> 
</html>

私はあなたの助けに感謝します。

出典

2012-02-06 bnieland

？私はulをイメージの周りに流し、適切なインデントで描画します。 – bnieland

あなたのインデントは実際には存在しますが、ボディから計算されます。浮動画像のdivはネストされたulのマージン/パディングをカバーします。私は長い時間これの解決策を探してきましたが、見つけられないようです。フローティングされた要素の背後にあるものは、背景イメージ、パディングまたはマージンです。ここにテストケースがあります - 私はそれをSOに掲示しましたが、JS http://www.easwee.net/floated_img_article/を除いて1年以上で解決策を見つけられませんでした。 – easwee

これは質問でした：http://stackoverflow.com/questions/2456137/floated-image-with-variable-width-and-heading-with-background-image – easwee

はこれを試してみてください：

/* add some margin-right for some white space between the list and image */ 
div {margin-right:12px; float:left;} 

/* add overflow and set the list-style attributes */ 
li {overflow:hidden; list-style:inside square none;}

出典

2012-02-06 15:53:00 jim31415

あなたはパーティーを揺るがすパーティーを弾きましょう！ – bnieland

http://jsbin.com/ulivem/2/editを参照してください。 – bnieland

CSS：どのようなURL

div {margin:0 10px 5px 0; float:left;} 


ul{ 
padding:0px; 
list-style-type:none; 
margin:0px; 
}

出典

2012-02-06 15:55:29 AlexC

フローティングされたimgの周りにulを流すには

答えて

関連する問題