3

我不知道如何命名我的问题，所以请看下图：

+------------+
|            | <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属性，但它没有用。

4

4 回答 4

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/

于 2012-09-13T12:13:56.570 回答
1 
<!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>
于 2012-09-13T12:29:58.277 回答
1

我无法让它在纯 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/ 缺点是页面加载后布局重新流动（除非在代码中指定了图像尺寸）。

于 2012-09-13T13:28:15.380 回答
0

试试这个

<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 ;
}
于 2012-09-13T12:13:45.670 回答