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 に答える