Question

我不确定如何命名我的问题，所以请看下面的图表：

+------------+
|            | <li>lorem ipsum dolor blah blah
|   image    | blah blah blah blah blah blah
|            | blah blah blah blah blah </li>
|            | <li> Blah blah blah blah blah
+------------+ blah blah blah blah blah blah
               blah blah blah blah blah blah
               blah blah blah blah blah </li>
<li>Lorem ispum dolor blah blah blah blah blah
blah blah blah blah blah blah blah blah blah
blah blah blah blah blah</li>

基本上，我希望文本环绕图像，但如果段落/列表的第一行是图像的旁边，我希望整个项目与第一行保持对齐，即使图像下面有空格来填充

图片有float: left;

尝试使用display，widows和orphans属性，但无效。

Answer 1

试一试：

<强> HTML

<div class="some-container">
    <img src="http://lorempixel.com/100/100/" />
    <ul>
        <li>FIRST ipsum dolor blah blah blah blah blah blah blah blah blah blah blah blah blah </li>
        <li>SECOND blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </li>
        <li>THIRD ispum dolor blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</li>
        <li>FOURTH ipsum dolor blah blah blah blah blah blah blah blah blah blah blah blah blah </li>
        <li>FIFTH blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </li>
        <li>SIXTH ispum dolor blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</li>
    </ul>
</div>

<强> CSS

img {
    float: left;
}
ul, li {
    display: inline;
}
li:after {
    content: "\A";
    white-space: pre;
}

<强>样本

http://jsfiddle.net/aymansafadi/gPmag/

Answer 2

<!DOCTYPE html>
<html>
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <title>Sample Page</title>

  <style type="text/css" media="screen">
    .clearfix {
      *zoom: 1;
    }
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
      line-height: 0;
    }
    .clearfix:after {
      clear: both;
    }
  </style>
</head>
<body>
  <div style ="width:600px;">
    <img src="http://sphotos-e.ak.fbcdn.net/hphotos-ak-ash4/s480x480/253488_482594598432035_2073442784_n.jpg" style="position: absolute; left: 0; width: 100px;"/>
    <div style="position: absolute; left: 340px;">
    <li>lorem ipsum dolor blah blah
     blah blah blah blah blah blah
     blah blah blah blah blah </li>

     <li> Blah blah blah blah blah
     blah blah blah blah blah blah
                   blah blah blah blah blah blah
                   blah blah blah blah blah </li>
    <li>Lorem ispum dolor blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah</li>
    <li>lorem ipsum dolor blah blah
     blah blah blah blah blah blah
     blah blah blah blah blah </li>

    </div>
    <div class="clearfix">&nbsp;</div>
  </div>
</body>
</html>

Answer 3

我无法让它在纯CSS中工作，所以我使用了一些Javascript：

var $img = $("img");
var imageBottom = $img.position().top + $img.height();
var desiredMargin = $img.position().left + $img.width();

$("li").each(function(){
    if ($(this).position().top < imageBottom)
    {
        $(this).css("margin-left", desiredMargin);
    }
});

工作样本在这里：http://jsfiddle.net/yVnNr/ 缺点是页面加载后布局重新流动（除非在代码中指定了图像尺寸）。

Answer 4

尝试this

<img src="http://i44.tinypic.com/5pfk05.jpg"/>
<ul>
    <li>lorem ipsum dolor blah blah
      blah blah blah blah blah blah
      blah blah blah blah blah </li>
    <li>lorem ipsum dolor blah blah
      blah blah blah blah blah blah
      blah blah blah blah blah </li>
    <li>lorem ipsum dolor blah blah
      blah blah blah blah blah blah
      blah blah blah blah blah </li>

</ul>

img
{
   width:200px;
   height: 200px;
   float: left;
   margin: 10px;
}

ul{
   margin: 15px ;
}

浮动 - 如何防止缠绕

4 个答案: